Difference between jQuery Document Ready Method and JavaScript Window Onload Event

Though both jQuery ready event and window onload event is used to perform task when page is loaded, there is a subtle difference between them. jQuery document.ready method, which is not method but a jQuery event is fired, when DOM is ready i.e. all elements of DOM is available, but not necessarily all contents e.g. images and video, on the other hand, JavaScript built-in window.onload event is fired when the HTML document is completely loaded, including DOM and all it's content e.g. images, audio and videos.

Because of this reason, you may see that scripting code defined in jQuery $(document).ready() executes before code defined on window.onload event, especially if the loading of images takes a long time.

By the way the difference between JavaScript window onload event and jQuery document.ready event is also one of the popular jQuery Interview Questions, asked to both beginners and experienced web developers. In this article, we will explore some key differences between jQuery ready vs onload and will find it out when to use the jQuery ready method vs window onload event.

And, If you want to learn Modern JavaScript or level up your skills then I suggest you join these online JavaScript courses. It's one of the best and hands-on resources to learn ES 6 and other new Javascript features.

What are window onload and jQuery document ready event

In JavaScript window is one of core object and defines several useful events e.g. onload, before jQuery comes, if want to execute any code, once DOM is loaded completely, we use window.onload event. We define code like

window.onload = function(){
  // code supposed to run once DOM is loaded
  alert("onload event is fired");
};

There is a problem with this code, it not exactly executed when DOM is loaded but it executes after all content including big images are loaded completely. Browser normally delay executing onload code, until all page content is loaded, because of this user can see significant delay between they first see the page and the time that code inside onload get executed, this delay is particularly notable, if your page content heavy images, flash videos or other heavy content with low bandwidth internet connection. jQuery solves this problem by introducing ready event, you might have seen code like below in several JavaScript files or HTML pages :

$(document).ready(function(){
    alert("Inside jQuery ready method");
});

here $() is a shortcut for jQuery() function, and we wrap document object into jQuery object to use ready() method. We are passing an anonymous function to ready() method, which will be executed once DOM is loaded. It doesn't wait till all DOM content available e.g. images. By the way, instead of using $(document).ready() function, you can also use following short-cut, which has same effect :

$(function() {
   alert("shortcut for document.ready method in jQuery");
});

Apart from faster execution, one of the key advantage of jQuery ready method over JavaScript window onload event is that, you can use them multiple times in your page, unlike onload event, which can only be bind to a single function. Browser will ensure to execute all document.ready code to execute in the order, they are specified in the HTML page.

jQuery ready vs window onload event

As I said earlier, main difference between them is when jQuery ready vs onload event get triggered, former trigger before later. But, before making decision when to use document ready vs window load, let's see couple of more differences between windows onload event vs document ready event.

1) Unlike jQuery ready event, which is only available in jQuery library, window.onload is standard event in JavaScript and available in every browser and library.

2) In most cases jQuery document ready event fire before window.onload event, in worst case, where there is no bulky content to load and there is no delay from browser side, window onload event get trigger at same time as document.ready event.

3) Another difference between document ready vs window load is that, by using window's onload technique, we can only specify one event handler, but we can use jQuery ready code multiple times in a page and browser will invoke them in the order they are declared in page.

4) jQuery ready event fires as soon as DOM is loaded i.e. all it's elements are available, it doesn't wait for DOM contents e.g. images, while JavaScript window.onload event first when DOM is fully loaded including contents e.g. images.

5) Last but not least difference between jQuery ready vs document onload is that former provides cross browser compatibility, an inherent jQuery advantage, while later suffers from browser specific implementation.

When to use jQuery ready over window onload

After knowing these differences between them, it's clear that you should use jQuery document ready() function for all practical purpose, where you want to execute your script code, when DOM is ready, but not when you have to perform operations on DOM contents e.g. images. 

You should use window.onload if you are dealing with images, there dimensions or other properties, because they may not be available, when jQuery document ready event get triggered.

 Another advantage of jQuery ready method is that you can use this multiple time in your page, as opposed to window.onload, which can only be bind to a single function.

That's all about the difference between the JavaScript window load event and the jQuery document ready method. I strongly suggest using to jQuery ready handler for all practical purpose except when you are dealing with DOM contents e.g. dimension of images, which may not be available when ready event gets triggered.

 jQuery ready also handles browser compatibility as opposed to window on load, which is despite being standard are subject to browser quirks and tweaks. by the way, if you know any other difference between jQuery document ready vs window onload event, which is not included in this post, then please let us know via comment.

Other jQuery tutorials from Javarevisited blog, you may like
jQuery Selector tutorials for Beginners
How to use jQuery class and ID selectors with examples
How to use multiple jQuery UI datepicker in JSP page
Top 5 Books to Learn jQuery from Start
How to redirect an HTML page using jQuery
How to get current URL parameters using jQuery