Comparing window.onload vs document.onload in JavaScript

Introduction

Welcome to this Byte, where we'll take a look at JavaScript event handling, more specifically, the window.onload and document.onload events. These two events are commonly used in web development, but they aren't the same thing. Let's see how they're different, and when to use each.

JavaScript Event Handling

Before we get into the specifics of window.onload and document.onload, we should explain a bit more about JavaScript event handling. In JavaScript, events are an important part of interactive web applications. They allow us to respond to user interactions, such as clicks, mouse movements, key presses, and even page loading.

button.addEventListener('click', function() {
    console.log('Button clicked!');
});

In the above snippet, we're listening for a "click" event on a button. When the button is clicked, the function is executed, and "Button clicked!" is logged to the console.

What is window.onload?

The window.onload event is triggered when the entire page has loaded. This includes all content like images, scripts, CSS, etc. You can think of it like a strict event planner who won't start the event until every single guest has arrived.

window.onload = function() {
    console.log('All content loaded!');
};

Here, "All content loaded!" is logged to the console, but only after everything on the page has fully loaded. It's a useful event for initializing your JavaScript application or starting animations, but it might not be the best choice if you need something to happen as soon as possible.

What is document.onload?

On the other hand, we have document.onload. This event is fired when just the DOM (Document Object Model) is ready. So that means it doesn't wait for stylesheets, images, or subframes to finish loading. In this case, our ficticious event planner would start the event even if no guests have arrived.

document.onload = function() {
    console.log('DOM is ready!');
};

"DOM is ready!" will be logged to the console as soon as the DOM is fully loaded. This can be much faster than window.onload in cases where there are many large images or other resources to load.

Note: It's important to mention that document.onload is not as widely supported as window.onload. For better browser compatibility, you might want to use the jQuery $(document).ready() method instead.

In the next section of this Byte, we'll discuss when each event should be used.

When to Use Each

Choosing between window.onload and document.onload (or rather, DOMContentLoaded) is like choosing the right tool for the job.

If your script needs to manipulate images or other resources that might take a while to load, window.onload is what you need. It waits patiently until every last resource is ready.

window.onload = function() {
  // This won't run until that super high-res image is ready to be manipulated
  let img = document.getElementById('super-high-res-img');
  img.style.filter = 'grayscale(100%)';
}

This is useful, for example, when you need to run some JS code that depends on one or more resources to be fully loaded.

But if your script only needs to manipulate the DOM and doesn't care about other resources (like images, CSS, or other JS), DOMContentLoaded is more efficient. It gets to work as soon as the DOM is ready, without waiting for large images that take forever to download.

document.addEventListener('DOMContentLoaded', function() {
  // This will run as soon as the DOM is ready, even if some images are still loading
  let heading = document.getElementById('important-heading');
  heading.style.color = 'red';
});

Conclusion

In this Byte, we've compared window.onload and document.onload (or rather, DOMContentLoaded), two JavaScript event handlers with similar names but different behaviors. window.onload waits for all resources to load before firing, while DOMContentLoaded fires as soon as the DOM is ready. As always, it's all about picking the right tool for the job - and now you know which one to reach for.