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.
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 $(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.
What is the difference between window.onload() and document.addEventListener('load', ..)?
As you say, they both do exactly the same thing. The advantage of
addEventListener
is that you can add more than one event listener to the load event.From some basic testing, it seems the listeners get called in the order they were set, though I don't know how reliable that is.
You can use either method to do whatever you need.
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.
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
Error: Can't Set Headers After They Are Sent to the Client
How to Access Object Properties Containing Special Characters
How to Create a Two Dimensional Array in JavaScript
How to Get Jquery to Perform a Synchronous, Rather Than Asynchronous, Ajax Request
Load and Execute Order of Scripts
Passing Data to a Bootstrap Modal
Working With $Scope.$Emit and $Scope.$On
Why Doesn't This Arrow Function Work in Ie 11
Recursive Function Returns Undefined
Safely Turning a Json String into an Object
Setting "Checked" For a Checkbox With Jquery
How to Return Many Promises and Wait For Them All Before Doing Other Stuff
How to Disable Scrolling Temporarily
How to Find Event Listeners on a Dom Node in JavaScript or in Debugging
Why Does Changing an Array in JavaScript Affect Copies of the Array