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

Jquery Problem Overview

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

Jquery Solutions

Solution 1 - Jquery

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.

Solution 2 - Jquery

$(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");
});

Solution 3 - Jquery

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.
});

Solution 4 - Jquery

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.

Solution 5 - Jquery

<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

Solution 6 - Jquery

$(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");
});

Solution 7 - Jquery

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

https://stackoverflow.com/questions/588040/window-onload-vs-document-onload

Solution 8 - Jquery

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.

Solution 9 - Jquery

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

Solution 10 - Jquery

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!");
});

Solution 11 - Jquery

> $(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

Content Type	Original Author	Original Content on Stackoverflow
Question	Satya	View Question on Stackoverflow
Solution 1 - Jquery	Nick Craver	View Answer on Stackoverflow
Solution 2 - Jquery	SagarPPanchal	View Answer on Stackoverflow
Solution 3 - Jquery	Kean Amaral	View Answer on Stackoverflow
Solution 4 - Jquery	Bharat Chodvadiya	View Answer on Stackoverflow
Solution 5 - Jquery	Shaik Md N Rasool	View Answer on Stackoverflow
Solution 6 - Jquery	Purvik Dhorajiya	View Answer on Stackoverflow
Solution 7 - Jquery	fantactuka	View Answer on Stackoverflow
Solution 8 - Jquery	Jones Agyemang	View Answer on Stackoverflow
Solution 9 - Jquery	user8816619	View Answer on Stackoverflow
Solution 10 - Jquery	Arun Kumar	View Answer on Stackoverflow
Solution 11 - Jquery	Srikrushna	View Answer on Stackoverflow