Difference between document.ready and window.onload

Today, we will become familiar with both document ready event of Jquery and the window onload event of JavaScript. Secondly, we will discuss the difference between document ready and window onload events because both events are often confusing. Using one event rather than the other can cause such problems inside the code, which may be tough to trace sometimes because of the elusive difference.

Also the difference between jQuery ready event and JavaScript onload event is one of the favorite questions of interviewers. They asked both beginners and experienced web developers.

Document.ready() or Jquery.ready():

document.ready() is JQuery event.
The Jquery ready event is called once after the DOM(Document object model) is loaded. DOM means the entire HTML page or all the HTML tags/script i.e. (div tag, table tag, paragraph tags, anchor tags etc etc.). It will not wait for the image or video to get load. It means that it is the earliest stage in the page loading process.

The document.ready() method executes when the ready event is fired. Below is the syntax to write it.

Example: -

	$(document).ready(function() {
	 // executes when HTML-Document
	 //is loaded and DOM is ready
	 alert("document is ready to perform operation");
	});
    

The ready() method does have an argument which is a callback function. You can write your code inside this callback function that will execute when DOM will finish loading. The following is the short form of the above code.

    
     $(function () {
  	  //place your code here
     });

Window.onload():

window.onload() is a JavaScript event.
The window load event is called when all the content (including the DOM and images) on the website page or document is loaded. It will wait for all the DOM elements ( HTML tags, for example, paragraph tags, div tags, h1, anchor tags) as well as content and all other dependent resources like images, stylesheets, videos, scripts.

Example: -

Suppose a large image on your web page window.onload() will wait for that image to finish its load. The execution will be slow when we use the window.onload() function, but it will be fast in the case of the document.ready() because it will not wait for the image to load completely.

 
	$(window).load(function() {
	  // Executes when complete page is 
       //fully loaded, including frames,
       //objects and images
	alert("window is loaded to perform operations");
	});
    

Major Differences:

1. The difference between document ready event and window onload event is we can have more than one document ready event handler in a web page but only one onload event handler. In this case, the browser will invoke document ready events in the order they are written in the document.
2. Because the document ready is a Jquery event, it is only available in the Jquery library, and the window onload is a JavaScript event. It is available in all most all browsers and libraries by default, so we don’t have to include any file to use it.
3. In most of the cases document ready event trigger before window onload event but sometimes when there is no heavy content to load and no browser delay, the window onload even get fire at the same time as document ready event.
4. As the definition says window onload event will wait for the content (image or videos to load) but if the image or videos are heavy and takes time to load, the window onload will wait for loading. The longer wait will result in a bad user experience.

I hope you understand the difference between document.ready and window.onload events/functions. I strongly recommend using the Jquery ready handler for all practical purposes. Unless you are dealing with DOM content, such as the size of the image (which may not be available) when the ready event is triggered. Jquery ready can also handle browser compatibility instead of window loading, although it is a standard browser quirk and adjustment. By the way, if you know any other difference between the Jquery document ready and window onload event (not included in this article), please feel free to write us in the comments section below.