Best IT Recipes

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

Recently, I had a problem with my JavaScript code, and extracting part of my code from my $(document).ready() and putting it in $(window).load() fixed.

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

+64
javascript jquery document-ready
Mar 03 2018-11-11T00:
source share
9 answers

load is called when all assets are loaded, including images. ready starts when the DOM is ready for interaction.

From MDC window.onload :

The download event is triggered at the end of the document loading process. At this point, all objects in the document are in the DOM, and all images and subframes are finished loading.

See the jQuery API documentation . ready (handler) :

While JavaScript provides the load of an event to execute code when the page, this event fails to fire until all assets, such as images, have been fully received. In most cases, a script can be executed as soon as the DOM hierarchy is fully built. The handler passed toready () 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 CSS value of a style property, it is important to reference external style sheets or insert style elements before referencing scripts.

+71
Mar 03 '11 at 14:30
source share

$(document).ready() means the DOM of your page is ready to go.

window.load() started when the whole page (including components such as CSS and image files) is fully loaded.

What are you trying to achieve?

+24
Mar 03 2018-11-11T00:
source share
 $(document).ready(function(){ //code here });

The above code is used almost every time 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 images. For example, you want to vertically and horizontally align the image, and for this you need to get the width and height of the image. With $(document).ready() you cannot do this if the visitor has not uploaded the image, in which case you need to initialize the jQuery alignment function when the image finishes loading. Where we use $(window).load()

+7
Mar 03 2018-11-11T00:
source share

$(document).ready is a jQuery event that fires when the DOM loads, so it fires when the document structure is ready.

$(window).load event is fired after loading all content (including css, images, etc.).

This is the main difference.

+4
Apr 05 '13 at 5:52
source share

$(document).ready() - DOM wrapper in <body>...</body>

$(window).load() is the document $(window).load() that completes all the DOMs in <html>...</html>

Let use in your case to save processing processing.

+3
Jan 16 '15 at 3:45
source share

The loading state is the state when the window object was created, and all the necessary components, including the DOM, were loaded into memory but were not passed to the rendering engine to display the same on the page.

A ready state, on the other hand, ensures that DOM elements, events, and other dependent components are passed to the rendering engine, displayed on the page, and ready for interaction and manipulation.

+1
Jul 25 '16 at 13:07
source share

In simple words, window.load is called when the entire contents of the window is loaded, while document.ready is called when the DOM is loaded and the document structure is ready.

+1
Jan 17 '17 at 9:11
source share

  • $ (document) .ready - the slider is fast in comparing $ (window) .load Event.

  • $ (document) .ready is fire when Dom is loaded, but $ (window) .load Event when Dom, css and images are 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>
+1
Oct 08 '17 at 15:24
source share

$(document).ready - jQuery event. It starts as soon as the DOM boots up and is ready to work with a script. This is the earliest point in the page loading process where the script can safely access elements on the html DOM page. This event is fired before all images, css, etc. Will be fully loaded.

window.load() started when the whole page (including components such as CSS and image files) is fully loaded.

-one
Dec 22 '17 at 6:19 06:19
source share


More articles:


All Articles