difference of 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 that same vein, what is the difference between $(window).load(function(){}); and $(document).load(function(){}); ?

Answer 1

In researching this and other "ready" issues, I think I've found the difference care of this question.

Here is the ready function handler in jQuery.

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

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

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

I have not fully tested an order to these ready-calls, but a brief inspection of the code leads me to believe they will be executed synchronously in the order the callbacks are added.

Therefore, $(document).ready and $(window).ready are synonymous, just as is $('aoeuaoeuaoeu').ready is synonymous, and each will likely fire in the order they are declared.

Answer 2

document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven't loaded yet.
The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

refer link1 link2