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

Question

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()?

Answer 1

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.

Answer 2

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

Answer 3

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