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(){});?

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(){});?

• javascript
• jquery

• 1 I'd like to point out that my question is more about the difference between window and document than the window.load vs document.ready ... I want to know what the difference is if you call ready on document vs window ... does one load faster? slower? etc ... please reconsider opening this. – concept47 Commented Mar 17, 2011 at 18:41
• I flagged it for reopening for that very reason. This is definitely not a duplicate question and one I've been trying to find the answer to myself. I hope we see some productive responses soon. – James Tomasino Commented Aug 4, 2012 at 14:57

2 Answers 2

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 plete 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/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.

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 plete 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