The window.onload and document ready events can be confusing, and using one instead of the other can lead to such issues in your code that might be difficult to debug as there is a subtle difference between them. Let’s go through them one by one.
Window: load event
The window load event is fired when the whole web page has completed loading. It waits for all the elements and the contents, i.e., for the DOM and all the dependent resources. The DOM includes all the HTML tags, for example, anchor tag, h1 tag, p tag, etc. The resources or content include stylesheets, images, videos, etc. The event handler, if defined, gets executed when the load event is triggered. You can define the event handler in one of the two following ways.
window.addEventListener("load", (event) => {
// insert code here
});
window.onload = (event) => {
// insert code here
};
jQuery ready()
The ready event is fired when the DOM has completed loading. It waits for elements such as HTML tags, anchor tags, etc. However, it does not wait for the contents such as images or videos, etc. The ready() method, if defined, gets executed when the ready event is triggered. That is how you define it.
$(document).ready(function () {
//insert code here
});
The argument to the ready() method is a callback function or the event handler where you put the code that you want to execute after the DOM has finished loading. The following code is the shorthand form of the above one.
$(function () {
//insert code here
});
So, now we know what they are and how to define them. Let's get to their differences.
- While the document ready is a jQuery event which means that it is only available in the jQuery library, the window.onload is a pure JavaScript event, and therefore, available in most browsers and libraries.
- The other main difference is apparent from their definitions. The window.onload event waits for the content unlike \$(document).ready(). So, if you have an image or a video that takes a lot of time to load, window.onload will wait for it to finish its loading, and during that time, none of the code inside it will get executed. Therefore, the user might have to wait a lot. On the other hand, \$(document).ready() won’t wait for it and load the script once the DOM is ready. However, if the script contains code that operates on an image or a video, such as finding the height and width of the image, \$(document).ready() might result in false values as the image might not have finished loading. In this case, window.onload is preferred.
Consider the following example where we display an image taken from some external website and a video. Since they take a little bit of time, the ready event is fired first, i.e.,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Difference between document.ready() and window.onload()</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
window.onload = (event) => {
console.log("Window load event handler");
};
$(document).ready(function () {
console.log("Document ready event handler");
});
</script>
</head>
<body id="body">
<h1>Difference between document.ready() and window.onload()</h1>
<video width="400" height="400" controls>
<source src="sample.mp4" type="video/mp4" />
</video>
<img
id="img"
src="https://images.unsplash.com/photo-1562205932-623cd8f3867c?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
/>
</body>
</html>
Output
Document ready event handler
Window ready event handler
In short, use window.onload when your script contains operations on the content. Otherwise, use \$(document).ready().
You can only define one event handler for the window.onload event, however, you can have several event handlers for the ready event. Let’s see.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Difference between document.ready() and window.onload()</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function () {
console.log("Document method1");
});
$(document).ready(function () {
console.log("Document method2");
});
</script>
</head>
<body id="body">
<h1>Difference between document.ready() and window.onload()</h1>
</body>
</html>
Output
Document method1
Document method2
In the above example, the methods got executed in the order they are defined.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Difference between document.ready() and window.onload()</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
window.onload = (event) => {
console.log("Window 1");
};
window.onload = (event) => {
console.log("Window 2");
};
</script>
</head>
<body id="body">
<h1>Difference between document.ready() and window.onload()</h1>
</body>
</html>
Output
Window 2
The event handler defined later overwrites the previous one. Therefore, only the second one got executed.
Note that when the dependent resources are not large enough, both the event handlers get executed at the same time or almost at the same time. Therefore, you might not see the difference every time. However, to be on the safe side, use them carefully.
