Window.Onload VS. Body.Onload VS. Document.Onready

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.

window.onload vs. body.onload vs. document.onready

window.onload will wait until all assets have finished downloading, such as images and scripts.

DOM ready waits until you can access the DOM via the API.

As a side note, in this day and age, you ought to be using window.addEventListener('load', function() { }, false) or attachEvent() for older IEs.

Difference between onload() and $.ready?

the load event (a.k.a "onload") on the window and/or body element will fire once all the content of the page has been loaded -- this includes all images, scripts, etc... everything.

In contrast, jquery's $(document).ready(...) function will use a browser-specific mechanism to ensure that your handler is called as soon as possible after the HTML/XML dom is loaded and accessible. This is the earliest point in the page load process where you can safely run script that intends to access elements in the page's html dom. This point arrives earlier (often much earlier) than the final load event, because of the additional time required to load secondary resources (like images, and such).

JS window.onload Usage Vs Document

Load Event on window:

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, scripts, links and sub-frames have finished loading
.

[source: developer.mozilla.org]

    <script>
window.onload = function(){ init(); };
</script>

Load Event on HTML Elements:

The load event is fired when a resource and its dependent
resources
have finished loading.

[source: developer.mozilla.org]

    <!-- When the image is loaded completely -->
<img onload="image_loaded()" src="w3javascript.gif">

<!-- When the frame is loaded completely (including all resources) -->
<iframe onload="frame_loaded()" src="about.html">

<!-- When body loaded completely (including all resources, images and iframes) -->
<body onload="init()">

Many forums even some answers in this site may mislead you, but the load event on body element is not only just equivalent to load event on window, it is the exact same event. The following quote clarifies it.

For historical reasons, some attributes/properties on the <body> and
<frameset> elements actually set event handlers on their parent Window
object. (The HTML specification names these: onblur, onerror, onfocus,
onload, onscroll.)

[source: developer.mozilla.org]

The DOMContentLoaded Event:

What developers should use is DOMContentLoaded event on document. It fires when the html has loaded and parsed completely.

    document.addEventListener("DOMContentLoaded", function(event) {
alert("Document is ready");
});

The DOMContentLoaded event is fired when the initial HTML document has
been completely loaded and parsed, without waiting for stylesheets,
images, and subframes to finish loading. A very different event load
should be used only to detect a fully-loaded page. It is an incredibly
popular mistake to use load where DOMContentLoaded would be much more
appropriate, so be cautious.

[source: developer.mozilla.org]

Perhaps this is the only answer regarding this topic that has proper References

window.onload vs body onload=/

window.onload = myOnloadFunc and <body onload="myOnloadFunc();"> are different ways of using the same event. Using window.onload is less obtrusive though - it takes your JavaScript out of the HTML.

All of the common JavaScript libraries, Prototype, ExtJS, Dojo, JQuery, YUI, etc. provide nice wrappers around events that occur as the document is loaded. You can listen for the window onLoad event, and react to that, but onLoad is not fired until all resources have been downloaded, so your event handler won't be executed until that last huge image has been fetched. In some cases that's exactly what you want, in others you might find that listening for when the DOM is ready is more appropriate - this event is similar to onLoad but fires without waiting for images, etc. to download.

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>

window.onload vs document.onload

When do they fire?

window.onload

  • By default, it is fired when the entire page loads, including its content (images, CSS, scripts, etc.).

In some browsers it now takes over the role of document.onload and fires when the DOM is ready as well.

document.onload

  • It is called when the DOM is ready which can be prior to images and other external content is loaded.

How well are they supported?

window.onload appears to be the most widely supported. In fact, some of the most modern browsers have in a sense replaced document.onload with window.onload.

Browser support issues are most likely the reason why many people are starting to use libraries such as jQuery to handle the checking for the document being ready, like so:

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

For the purpose of history. window.onload vs body.onload:

A similar question was asked on codingforums a while
back regarding the usage of window.onload over body.onload. The
result seemed to be that you should use window.onload because it is
good to separate your structure from the action.

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.



Related Topics



Leave a reply



Submit