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

Javascript Problem Overview

I have been having a problem lately with my JavaScript CODE and taking a portion of my code out of my $(document).ready() and putting it within $(window).load() fixed the problem.

Now I understand that window.load is fired just after document.ready, but why is it not ready after document.ready, that is after window.load()?

Javascript Solutions

Solution 1 - Javascript

load is called when all assets are done loading, including images. ready is fired when the DOM is ready for interaction.

From the MDC, window.onload:

> The load event fires at the end of the > document loading process. At this > point, all of the objects in the > document are in the DOM, and all the > images and sub-frames have finished > loading.

From the jQuery API documentation, .ready( handler ):

> While JavaScript provides the load > event for executing code when a page > is rendered, this event does not get > triggered until all assets such as > images have been completely received. > In most cases, the script can be run > as soon as the DOM hierarchy has been > fully constructed. The handler passed > to .ready() is guaranteed to be > executed after the DOM is ready, so > this is usually the best place to > attach all other event handlers and > run other jQuery code. When using > scripts that rely on the value of CSS > style properties, it's important to > reference external stylesheets or > embed style elements before > referencing the scripts.

Solution 2 - Javascript

$(document).ready() means that the DOM of your page is ready to be manipulated.

window.load() is triggered when the whole page (incl. components like CSS and image files) has been completely loaded.

What are you trying to achieve?

Solution 3 - Javascript

$(document).ready(function(){
//code here
});

The code above is used almost every time when we work with jQuery.

This code is used when we want to initialize our jQuery codes after the DOM is ready.

$(window).load()

Sometimes you want to manipulate pictures. For example you want to vertically and horizontally align a picture and you need to get the width and height of the picture in order to do that. With $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded, in which case you need to initialize the jquery alignment function when the image finishes loading. That’s where we use $(window).load()

Solution 4 - Javascript

$(document).ready 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 (including css, images etc..) is loaded.

This is major difference.

Solution 5 - Javascript

$(document).ready() is wrap DOM in <body>...</body>

$(window).load() is papa of document wrap all DOM in <html>...</html>

Let's use in your case to save render processing.

Solution 6 - Javascript

In simple words, window.load is called when all content of window is loaded whereas document.ready is called when DOM is loaded and document structure is ready.

Solution 7 - Javascript

Load state is the state when the window object has been created and all necessary components including DOM has been loaded in memory, but has not been passed to the rendering engine for rendering the same in page.

Ready state on the other hand makes it sure that the DOM elements, events and other dependent components are passed on to the rendering engine, rendered on page, and is ready for interaction and manipulation.

Solution 8 - Javascript

$(document).ready is slider fast in comparison $(window).load Event.
$(document).ready is fire when Dom is load but $(window).load Event fire when Dom ,css and images fully loaded.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
  <script  src="https://code.jquery.com/jquery-1.12.4.js" ></script>
    <script> 
        $(window).load(function () {          
            var img = $('#img1');
      alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());          
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">     
    <div>
        <img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
    </div>
    </form>
</body>
</html>

Solution 9 - Javascript

$(document).ready is a jQuery event. It fires as soon as the DOM is loaded and ready to be manipulated by script. This is the earliest point in the page load process where the script can safely access elements in the page's html DOM. This event is fired before all the images, css etc. are fully loaded.