Difference between $(window).load() and $(document).ready() functions

Question

What is the difference between $(window).load(function() {}) and $(document).ready(function() {}) in jQuery?

Note that in jQuey 3.x there is no `$(window).load()`. Use `$(window).on('load', function(){});` instead. — JP Zhang, Aug 27 '20 at 15:14

score 294 · Accepted Answer · edited Sep 10 '13 at 01:29

294

document.ready is a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all content.
window.onload fires later (or at the same time in the worst/failing cases) when images and such are loaded, so if you're using image dimensions for example, you often want to use this instead.

edited Sep 10 '13 at 01:29

Ofer Zelig

17,068
9
59
93

answered Jan 03 '11 at 12:36

Nick Craver

623,446
136
1,297
1,155

47

shorthand for `$(document).ready(function(){})` is `$(function(){})` and another important difference from the window.load is that it will run on ALL future calls of the function, even after the initial DOMready. – Michael Butler Apr 03 '14 at 21:29
are we to infer that `onload` is the same as `load`? – abcd Jan 21 '16 at 05:24
3

@dbliss Yes I believe onload is shorthand for `$(window).on('load')`. Both referencing the **load** event. – Free Lancer Mar 19 '16 at 09:10
5

@MichaelButler - What do you mean with `it will run on ALL future calls of the function`? – BornToCode May 22 '16 at 15:17
@MichaelButler's comment is partially wrong. `$(document).ready(function(){})` is only executed once, when the DOM is ready. There is no such thing as "future calls". – Doug S Aug 14 '16 at 19:36
@Doug S., sorry but you are wrong or misunderstood here. See the jquery api documentation: "If .ready() is called after the DOM has been initialized, the new handler passed in will be executed immediately." my comment stands correct. We're talking about the ready function notan arbitrary specific callback handler. – Michael Butler Aug 15 '16 at 23:06
8

@MichaelButler: You need to be more clear in your comment. 1) You're talking about the USER executing more `$(document).ready` code after the DOM is ready. That's such a small use case that it probably wasn't worth confusing everyone with mentioning it. 2) The ENVIRONMENT only calls `$(document).ready(f‌unction(){})` once, when the DOM is ready. If the user, for some reason, executes more `$(document).ready` after the DOM is ready, then yes, it will be executed immediately. – Doug S Aug 16 '16 at 03:53
@DougS I think you should delete your comments, you're just digging yourself into a hole now. – Michael Butler Aug 16 '16 at 13:36
6

I beg to differ, Michael. Let's just leave it at this and not degrade into useless comments. At least the confused people now have their answer. – Doug S Aug 16 '16 at 17:57

score 85 · Answer 2 · answered Nov 19 '13 at 09:43

85

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

answered Nov 19 '13 at 09:43

SagarPPanchal

9,839
6
34
62

Will 'load' execute again, if e.g. an Ajax request finished after the user started it by clicking a button? – erik-stengel Mar 05 '23 at 19:15
2

@erik-stengel no! – SagarPPanchal Mar 07 '23 at 07:22

score 46 · Answer 3 · edited Oct 24 '18 at 07:34

46

The $(window).load() is NOT available in jQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

To get around it, you can use it as an "Event Handler Attachment"

$( window ).on("load", function() {
        // Handler for .load() called.
});

edited Oct 24 '18 at 07:34

Rohit Agre

1,528
1
14
25

answered Sep 05 '18 at 11:28

Kean Amaral

5,503
2
16
9

score 20 · Answer 4 · edited Aug 08 '13 at 15:28

20

The difference are:

$(document).ready(function() { is jQuery event that is fired when DOM is loaded, so it’s fired when the document structure is ready.

$(window).load() event is fired after whole content is loaded.

edited Aug 08 '13 at 15:28

Amal Murali

75,622
18
128
150

answered Apr 05 '13 at 05:50

Bharat Chodvadiya

1,644
4
20
31

score 10 · Answer 5 · answered Nov 25 '13 at 06:44

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load will be triggered after all the iframe content is loaded

Purvik Dhorajiya · Answer 6 · 2017-05-10T17:28:20.423

8

$(document).ready happens when all the elements are present in the DOM, but not necessarily all content.

$(document).ready(function() {
    alert("document is ready");
});

window.onload or $(window).load() happens after all the content resources (images, etc) have been loaded.

$(window).load(function() {
    alert("window is loaded");
});

edited May 10 '17 at 17:28

answered Jan 31 '17 at 10:54

Purvik Dhorajiya

4,662
3
34
43

score 3 · Answer 7 · edited May 23 '17 at 12:26

3

From jquery prospective - it's just adding load/onload event to window and document. Check this out:

window.onload vs document.onload

edited May 23 '17 at 12:26

Community

1
1

answered Jan 03 '11 at 12:26

fantactuka

3,298
19
29

score 2 · Answer 8 · edited Apr 07 '19 at 19:02

2

I think the $(window).load event is not supported by JQuery 3.x

edited Apr 07 '19 at 19:02

Federico Grandi

6,785
5
30
50

answered Oct 22 '17 at 23:56

user8816619

31
1

1

As per the [documentation](https://api.jquery.com/load-event/) the $(window).load event was removed in JQuery 3.0 – Mathieu VIALES Oct 23 '17 at 00:05
3

This is correct. In order to get around it, you can use it as an "Event Handler Attachment": $( window ).on("load", function() { // Handler for .load() called. }); – Kean Amaral Sep 05 '18 at 11:21

score 1 · Answer 9 · edited May 31 '20 at 19:58

1

According to DOM Level 2 Events, the load event is supposed to fire on document, not on window. However, load is implemented on window in all browsers for backwards compatibility.

edited May 31 '20 at 19:58

HoldOffHunger

18,769
10
104
133

answered Dec 17 '12 at 17:18

Jones Agyemang

1,230
16
15

score 1 · Answer 10 · answered Feb 07 '18 at 05:58

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

DOM: The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (Built-in JavaScript) 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):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

score 1 · Answer 11 · answered Jun 14 '18 at 07:12

$(window).load is an event that fires when the DOM and all the content (everything) on the page is fully loaded like CSS, images and frames. One best example is if we want to get the actual image size or to get the details of anything we use it.

$(document).ready() indicates that code in it need to be executed once the DOM got loaded and ready to be manipulated by script. It won't wait for the images to load for executing the jQuery script.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$(window).load fired after the $(document).ready().

$(window).load was deprecated in 1.8, and removed in jquery 3.0

Difference between $(window).load() and $(document).ready() functions

11 Answers11

Linked