Hello Readers,

document.ready : document.ready is an specific jQuery event when the entire HTML have been loaded.

window.onload : window.onload is a normal JavaScript event.

The below are some point to define the difference between document.ready function and the window.onload:

1. document.ready() is a jquery event and it occurs when the HTML document has been loaded, while the .onload() event is a normal javascript event and its occurs later, when all content (e.g. images, script) has been loaded.

2. We can have more than one document.ready() function in a page whereas we can have only one body window.onload() function.

3. document.ready() function called as soon as DOM is loaded while window.onload() fuction is called when everything gets loaded on the page that includes images, scripts, DOM and everything.

4. The window.onload() event is a standard event in the DOM, while the document.ready() event is specific to jQuery.

5. In case of document.ready() replace $ with jQuery when you receive ('$ is not defined.').

6. document.ready() is a Cross browser compatible while .onload() not Cross browser compatible.

7. document.ready(): Best for onetime initialization while window.onload() not best for onetime initialization.

8. document.ready() called as soon as DOM is ready (may called slightly before than pageLoad()).

9. Example of document.ready():

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

10.Example of window.onload():

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