Which is more widely supported: window.onload
or document.onload
?
This question is related to
javascript
event-handling
dom-events
window.onload
and onunload
are shortcuts to document.body.onload
and document.body.onunload
document.onload
and onload
handler on all html tag seems to be reserved however never triggered
'onload
' in document -> true
Window.onload is the standard, however - the web browser in the PS3 (based on Netfront) doesn't support the window object, so you can't use it there.
The general idea is that window.onload fires when the document's window is ready for presentation and document.onload fires when the DOM tree (built from the markup code within the document) is completed.
Ideally, subscribing to DOM-tree events, allows offscreen-manipulations through Javascript, incurring almost no CPU load. Contrarily, window.onload
can take a while to fire, when multiple external resources have yet to be requested, parsed and loaded.
?Test scenario:
To observe the difference and how your browser of choice implements the aforementioned event handlers, simply insert the following code within your document's - <body>
- tag.
<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){
console.log("document.onload", e, Date.now() ,window.tdiff,
(window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
console.log("window.onload", e, Date.now() ,window.tdiff,
(window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>
?Result:
Here is the resulting behavior, observable for Chrome v20 (and probably most current browsers).
document.onload
event.onload
fires twice when declared inside the <body>
, once when declared inside the <head>
(where the event then acts as document.onload
).window.onload
event handler within the confines of the HTML-<head>
element.?Example Project:
The code above is taken from this project's codebase (index.html
and keyboarder.js
).
For a list of event handlers of the window object, please refer to the MDN documentation.
In short
window.onload
is not supported by IE 6-8document.onload
is not supported by any modern browser (event is never fired)window.onload = () => console.log('window.onload works'); // fired
document.onload = () => console.log('document.onload works'); // not fired
_x000D_
window.onload however they are often the same thing. Similarly body.onload becomes window.onload in IE.
According to Parsing HTML documents - The end,
The browser parses the HTML source and runs deferred scripts.
A DOMContentLoaded
is dispatched at the document
when all the HTML has been parsed and have run. The event bubbles to the window
.
The browser loads resources (like images) that delay the load event.
A load
event is dispatched at the window
.
Therefore, the order of execution will be
DOMContentLoaded
event listeners of window
in the capture phaseDOMContentLoaded
event listeners of document
DOMContentLoaded
event listeners of window
in the bubble phaseload
event listeners (including onload
event handler) of window
A bubble load
event listener (including onload
event handler) in document
should never be invoked. Only capture load
listeners might be invoked, but due to the load of a sub-resource like a stylesheet, not due to the load of the document itself.
window.addEventListener('DOMContentLoaded', function() {_x000D_
console.log('window - DOMContentLoaded - capture'); // 1st_x000D_
}, true);_x000D_
document.addEventListener('DOMContentLoaded', function() {_x000D_
console.log('document - DOMContentLoaded - capture'); // 2nd_x000D_
}, true);_x000D_
document.addEventListener('DOMContentLoaded', function() {_x000D_
console.log('document - DOMContentLoaded - bubble'); // 2nd_x000D_
});_x000D_
window.addEventListener('DOMContentLoaded', function() {_x000D_
console.log('window - DOMContentLoaded - bubble'); // 3rd_x000D_
});_x000D_
_x000D_
window.addEventListener('load', function() {_x000D_
console.log('window - load - capture'); // 4th_x000D_
}, true);_x000D_
document.addEventListener('load', function(e) {_x000D_
/* Filter out load events not related to the document */_x000D_
if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)_x000D_
console.log('document - load - capture'); // DOES NOT HAPPEN_x000D_
}, true);_x000D_
document.addEventListener('load', function() {_x000D_
console.log('document - load - bubble'); // DOES NOT HAPPEN_x000D_
});_x000D_
window.addEventListener('load', function() {_x000D_
console.log('window - load - bubble'); // 4th_x000D_
});_x000D_
_x000D_
window.onload = function() {_x000D_
console.log('window - onload'); // 4th_x000D_
};_x000D_
document.onload = function() {_x000D_
console.log('document - onload'); // DOES NOT HAPPEN_x000D_
};
_x000D_
In Chrome, window.onload is different from <body onload="">
, whereas they are the same in both Firefox(version 35.0) and IE (version 11).
You could explore that by the following snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--import css here-->
<!--import js scripts here-->
<script language="javascript">
function bodyOnloadHandler() {
console.log("body onload");
}
window.onload = function(e) {
console.log("window loaded");
};
</script>
</head>
<body onload="bodyOnloadHandler()">
Page contents go here.
</body>
</html>
And you will see both "window loaded"(which comes firstly) and "body onload" in Chrome console. However, you will see just "body onload" in Firefox and IE. If you run "window.onload.toString()
" in the consoles of IE & FF, you will see:
"function onload(event) { bodyOnloadHandler() }"
which means that the assignment "window.onload = function(e)..." is overwritten.
Add Event Listener
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
// - including fonts, images, etc.
});
</script>
Update March 2017
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
$(window).on('load', function() {
console.log('All assets are loaded')
})
Source: Stackoverflow.com