71

Just a simple question, for the jQuery event. Are the .load(), .ready() and .unload() run in order when the DOM is loaded? The answer seems yes when I see the jQuery Documentation.

<script type="text/javascript">

    $(window).load(function () {
        // run code
        initializeCode();
    });

    $(document).ready(function() {
        //run code that MUST be after initialize
    });

    $(window).unload(function() {
        Cleanup();
    });
</script>

However, the code inside the .ready() is execute before the initializeCode(); is execute, so I feel really strange. And now I have to place my code inside the .onload() method and just after the initializeCode(); line, which means to be inside the .ready() block.

Could someone explain me more about this, as I am new to jQuery?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Eric
  • 713
  • 1
  • 6
  • 4

4 Answers4

129

NOTE: .load() & .unload() have been deprecated

$(window).load();

Will execute after the page along with all its contents are done loading. This means that all images, CSS (and content defined by CSS like custom fonts and images), scripts, etc. are all loaded. This happens event fires when your browser's "Stop" -icon becomes gray, so to speak. This is very useful to detect when the document along with all its contents are loaded.

$(document).ready();

This on the other hand will fire as soon as the web browser is capable of running your JavaScript, which happens after the parser is done with the DOM. This is useful if you want to execute JavaScript as soon as possible.

$(window).unload();

This event will be fired when you are navigating off the page. That could be Refresh/F5, pressing the previous page button, navigating to another website or closing the entire tab/window.

To sum up, ready() will be fired before load(), and unload() will be the last to be fired.

Community
  • 1
  • 1
Tower
  • 98,741
  • 129
  • 357
  • 507
  • 10
    `$(document).ready()` actually fires as soon as the DOM has been completely loaded, so you can definitely deal with all of DOM in your handler. If you want to execute JavaScript as soon as possible, put it in a `script` tag in your header, outside of any event handler. It will execute as soon as it's loaded and parsed, which might be well before `$(document).ready()`fires. – Simon Apr 12 '11 at 07:43
11

window load will wait for all resources to be loaded.

document ready waits for the document to be initialized.

unload well, waits till the document is being unloaded.

the order is: document ready, window load, ... ... ... ... window unload.

always use document ready unless you need to wait for your images to load.

shorthand for document ready:

$(function(){
    // yay!
});
David Murdoch
  • 87,823
  • 39
  • 148
  • 191
  • he is confused about **order**, `ready` should be fired before `load` but it is not. He is not asking about what you are telling. – Sarfraz Apr 21 '10 at 13:13
  • 4
    @Sarfraz...what? he clearly states in his post that "ready() is execute[d] before the initializeCode();" – David Murdoch Apr 21 '10 at 15:04
6

If both "document.ready" variants are used they will both fire, in the order of appearance

$(function(){
    alert('shorthand document.ready');
});

//try changing places
$(document).ready(function(){
    alert('document.ready');
});
ljgww
  • 3,418
  • 6
  • 19
  • 21
0

Also, I noticed one more difference between .load and .ready. I am opening a child window and I am performing some work when child window opens. .load is called only first time when I open the window and if I don't close the window then .load will not be called again. however, .ready is called every time irrespective of close the child window or not.

Praveen Singh
  • 11