Difference in load / ready events between window and document

Question

Is there a difference between $(window).ready(function(){}) and $(document).ready(function(){})?

If so, what is it?

In the same vein, what is the difference between $(window).load(function(){}); and $(document).load(function(){}); ?

Answer 1

Studying this and other "ready-made" problems, I think I found a difference in this matter .

Here is a ready-made function handler in jQuery.

 ready: function( fn ) { // Attach the listeners jQuery.bindReady(); // Add the callback readyList.add( fn ); return this; }, 

It seems that you can add any element (even full jibberish) to this function, and its callback will be added to readyList. It also seems that when the document is ready, it calls all the callbacks in the readyList, regardless of whether they are part of the document or not.

See this script for an example: http://jsfiddle.net/w5k5t/2/

I have not fully tested the order for these ready-made calls, but a brief review of the code makes me think that they will be executed synchronously in the order of adding callbacks.

Therefore, $ (document) .ready and $ (window) .ready are synonyms, like $ ('aoeuaoeuaoeu'). ready is a synonym, and each of them is likely to shoot in the order in which they are declared.

Answer 2

the document ready event is already executed when the HTML document is loaded, and the DOM is ready, even if all the graphic files are not already loaded.
The window load event is executed a bit later when the full page is fully loaded, including all frames, objects, and images. Therefore, functions related to images or other page content must be placed in the load event for the window or the content tag itself.

refer link1 link2