Jquery. What is the difference between these functions $(document).ready and $(window).load?

Question

What is the difference between these functions $(document).ready and $(window).load, for example if i am want one use for run code when all page is complete load? As these functions are implemented in pure JavaScript? Thanks!

score 3 · Accepted Answer · edited Jan 24 '14 at 14:01

3

window.onload = function() {

    alert( "welcome" );

};

Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:

$( document ).ready(function() {

    // Your code here.

});

Source from http://learn.jquery.com/about-jquery/how-jquery-works/

Plus, $(document).ready(function(){}); It call function by call back. You can define many $(document).ready . It 'll run all .

window.onload = function(){} .
"assign" => When you define many window.onload = ..., It just run last function.

edited Jan 24 '14 at 14:01

Karl-André Gagnon

32,531
5
47
70

answered Jan 24 '14 at 13:47

LogPi

710
6
11

`$(window).load()` and `window.onload = ...` is not the same thing, but do the same thing. You can have has much `$(window).load()` event you want but it is not recommanded (same with the DOM ready method). It is the same as `window.addEventListener('load', function(){})`. Also, it is not *unfortunate* that the code run only when *"all images are finished"*. – Karl-André Gagnon Jan 24 '14 at 13:57

score 1 · Answer 2 · answered Jan 24 '14 at 13:43

1

$(document).ready() fires as soon as the DOM is ready and you can mess with the DOM elements. $(window).load() fires when loading of the page content (including images) is done.

answered Jan 24 '14 at 13:43

Constantin Groß

9,010
4
17
44

score 1 · Answer 3 · answered Jan 24 '14 at 13:44

document.ready will execute right after the HTML document is loaded property, and the DOM is ready.

document.ready (a jQuery event) will fire when all the elements are in place, and they can be referenced in the JS code, but the content is not necessarily loaded.

the window.load however will wait for the page to be fully loaded, this includes inner frames, images etc.

window.load is a built-in JavaScript method, it is known to have some quirks in old browsers (IE6, IE8, old FF and Opera versions) but will generally work in all of them.

window.load can be used in the body's onload event like this (but I would strongly suggest you avoid mixing code like this in the HTML, as it is a source for confusion later on):

Jquery. What is the difference between these functions $(document).ready and $(window).load?

3 Answers3