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 ofwindow.onload
overbody.onload
. The
result seemed to be that you should usewindow.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
How to Register Event with Useeffect Hooks
Replace All Spaces in a String with '+'
Thickness of Lines Using Three.Linebasicmaterial
Background-Color Hex to JavaScript Variable
Share Variables Between Files in Node.Js
Get Query String Parameters Url Values with Jquery/JavaScript (Querystring)
Is 'Window' Really Global in JavaScript
How to Filter by Object Property in Angularjs
What Is the Meaning of an Underscore in JavaScript Function Parameter
Why Not Always Use the Index as the Key in a Vue.Js for Loop
Disable Hover Effects on Mobile Browsers
Passing in Dynamic Key:Value Pairs to an Object Literal
Checking Whether Something Is Iterable
Moment.Js - Utc Gives Wrong Date