DOMContentLoaded vs. window.onload

Hello, World DOMination: Adding a CSS Class After DOM Load Event

In previous JavaScript examples, you might have used window.onload to run a function after the page has fully loaded. This ensures all objects are loaded in the DOM, including images, scripts, stylesheets, and subframes. While this approach guarantees that every asset is ready, it can cause delays because large images or other resources might take time to load.

What if your JavaScript doesn’t need to depend on images, stylesheets, or subframes being fully loaded? In that case, you can make your code more efficient by using the DOMContentLoaded event instead of window.onload.

According to MDN, "the DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading."

When and Why to Use DOMContentLoaded

Why: Use DOMContentLoaded if your JavaScript only relies on the DOM structure being available. For example, if your script manipulates or interacts with the HTML elements directly, there is no need to wait for stylesheets or images to load.

When: Use this event when you want faster interactions with the page, especially for improving user experience by reducing delays.

Analogy: Think of DOMContentLoaded as receiving a house blueprint (the DOM structure) that's ready for you to work on. You don't need to wait for the house to be fully painted (stylesheets) or furnished (images) before starting your work. By contrast, window.onload waits until the house is completely painted, furnished, and decorated, which might take longer.

Adding a CSS Class After DOM Load Event

Let’s use DOMContentLoaded to add a CSS class to the <body> element immediately after the DOM is loaded. Here's an example:


window.addEventListener("DOMContentLoaded", event => {
    document.body.className = "i-got-loaded";
});

After including this script in your HTML (either in a script tag or an external JS file), refresh the browser and inspect the page. You'll see that the <body> element now has a class of i-got-loaded.

Real-World Example

Imagine you want to show a custom loading animation on a webpage while the images are still loading. You could use DOMContentLoaded to hide the loading animation as soon as the DOM is ready and let the images load in the background. This ensures users can interact with the content without waiting for large media files to load.


// Example: Display a loading message
window.addEventListener("DOMContentLoaded", event => {
    const loadingElement = document.querySelector(".loading");
    if (loadingElement) {
        loadingElement.style.display = "none"; // Hide loading message
    }
});

This approach makes the site feel more responsive and user-friendly, especially on slower connections.

Comparison: DOMContentLoaded vs. window.onload

Feature	DOMContentLoaded	window.onload
When it fires	After the DOM is loaded and parsed	After all resources (images, scripts, stylesheets) are fully loaded
Use case	Manipulating the DOM structure	Scripts relying on fully loaded resources
Performance	Faster	Slower

Extra Tip: Combining Events

In some cases, you might need to combine DOMContentLoaded with window.onload. For example, you could use DOMContentLoaded to set up the basic DOM interactions and window.onload for actions that require fully loaded resources:


// Set up DOM interactions
window.addEventListener("DOMContentLoaded", () => {
    console.log("DOM is fully loaded and parsed.");
});

// Execute after all resources are loaded
window.addEventListener("load", () => {
    console.log("All resources (images, styles) are fully loaded.");
});