Differencebetween $(Window).Load and $(Document).Ready

jQuery - What are differences between $(document).ready and $(window).load?

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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.

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

• 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.

window.onload vs $(document).ready()

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.

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

window.onload = function() {

    alert( "welcome" );

};

Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event:

$( document ).ready(function() {

    // Your code here.

});

Source from http://learn.jquery.com/about-jquery/how-jquery-works/

Plus, $(document).ready(function(){}); It call function by call back. You can define many $(document).ready . It 'll run all .

window.onload = function(){} .
"assign" => When you define many window.onload = ..., It just run last function.

Difference between nested $(document).ready() and $(window).load() events

$(document).ready() executes when HTML-Document is loaded and DOM is ready. so inner ready() invokes because DOM is already become ready. ready() checks only current state not compare with previous state. so condition something like this

if state=="ready" then invoke latest $(document).ready();

This condition is true for all level ready() method.

BUT

$(window).load() executes when complete page is fully loaded, including all frames, objects and images. In simple way, load() is executes when state changed to loaded state from another state. First load() executed when state become loaded from another state, but inner load() not detected and state changes so it will not executed.

if (is_state_changed=true AND current_state=="ready" AND current_state !== previous_state) then invoke latest $(window).load();

Above condition is true for first/outer load(), but not true for inner load() because state is not changed(its remain same) for inner load()

window.onload vs document.ready jQuery

I had a same problem in handling Image height and width inside $(document)ready and I found some better referenses to solve it... I hope this may help some one

$(document).ready()

The document ready event fired when the HTML document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet. If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place.

Code:

$(document).ready(function() {
    // document is loaded and DOM is ready
    alert("document is ready");
});

$(window).load()

The window load event fired a bit later, when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

Code:

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

---

Related Topics