Introduction
Welcome to this Byte, the place we’ll check out JavaScript occasion dealing with, extra particularly, the window.onload and doc.onload occasions. These two occasions are generally utilized in internet growth, however they are not the identical factor. Let’s have a look at how they’re totally different, and when to make use of every.
JavaScript Occasion Dealing with
Earlier than we get into the specifics of window.onload and doc.onload, we should always clarify a bit extra about JavaScript occasion dealing with. In JavaScript, occasions are an vital a part of interactive internet functions. They permit us to reply to consumer interactions, similar to clicks, mouse actions, key presses, and even web page loading.
button.addEventListener('click on', perform() {
console.log('Button clicked!');
});
Within the above snippet, we’re listening for a “click on” occasion on a button. When the button is clicked, the perform is executed, and “Button clicked!” is logged to the console.
What’s window.onload?
The window.onload occasion is triggered when all the web page has loaded. This consists of all content material like pictures, scripts, CSS, and so on. You possibly can consider it like a strict occasion planner who will not begin the occasion till each single visitor has arrived.
window.onload = perform() {
console.log('All content material loaded!');
};
Right here, “All content material loaded!” is logged to the console, however solely after every little thing on the web page has absolutely loaded. It is a helpful occasion for initializing your JavaScript software or beginning animations, nevertheless it may not be the only option in case you want one thing to occur as quickly as doable.
What’s doc.onload?
However, we now have doc.onload. This occasion is fired when simply the DOM (Doc Object Mannequin) is prepared. So which means it would not look forward to stylesheets, pictures, or subframes to complete loading. On this case, our ficticious occasion planner would begin the occasion even when no visitors have arrived.
doc.onload = perform() {
console.log('DOM is prepared!');
};
“DOM is prepared!” will probably be logged to the console as quickly because the DOM is absolutely loaded. This may be a lot quicker than window.onload in instances the place there are lots of giant pictures or different sources to load.
Observe: It is vital to say that doc.onload just isn’t as broadly supported as window.onload. For higher browser compatibility, you may need to use the jQuery $(doc).prepared() methodology as a substitute.
Within the subsequent part of this Byte, we’ll talk about when every occasion needs to be used.
When to Use Every
Selecting between window.onload and doc.onload (or somewhat, DOMContentLoaded) is like choosing the proper instrument for the job.
In case your script wants to control pictures or different sources that may take some time to load, window.onload is what you want. It waits patiently till each final useful resource is prepared.
window.onload = perform() {
// This would possibly not run till that tremendous high-res picture is able to be manipulated
let img = doc.getElementById('super-high-res-img');
img.fashion.filter = 'grayscale(100%)';
}
That is helpful, for instance, when you want to run some JS code that relies on a number of sources to be absolutely loaded.
But when your script solely wants to control the DOM and would not care about different sources (like pictures, CSS, or different JS), DOMContentLoaded is extra environment friendly. It will get to work as quickly because the DOM is prepared, with out ready for big pictures that take perpetually to obtain.
doc.addEventListener('DOMContentLoaded', perform() {
// It will run as quickly because the DOM is prepared, even when some pictures are nonetheless loading
let heading = doc.getElementById('important-heading');
heading.fashion.colour = 'pink';
});
Conclusion
On this Byte, we have in contrast window.onload and doc.onload (or somewhat, DOMContentLoaded), two JavaScript occasion handlers with related names however totally different behaviors. window.onload waits for all sources to load earlier than firing, whereas DOMContentLoaded fires as quickly because the DOM is prepared. As at all times, it is all about selecting the correct instrument for the job – and now you already know which one to achieve for.
