How do you determine the firing order of load and DOMContentLoaded events?
Question
Why does the below code ( JS Bin ) fire in the order 1, 5, 3, 4? And why does 2 not fire at all?
According to the answer to this question , "4" should fire before "5". That's not what is shown by the order of the alerts. However, if I change the body and img onload handlers to execute document.write instead of alert , then 5 will be displayed, which is consistent with that answer.
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
alert("1");
});
document.addEventListener("load", function() {
alert("2");
});
window.addEventListener("load", function() {
alert("3");
});
</script>
</head>
<body onload="alert('4')">
<h1>Hello World!</h1>
<img onload="alert('5')" src="https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt="Smiley face" width="42" height="42" />
</body>
</html>
1 answers
solution1
4 ACCPTED 2014-10-10 15:50:28
window/body onload fires after all the images are loaded.
From MDN 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, scripts, links and sub-frames have finished loading.
So window load should come after the image load is fired.
And order of window/body events being triggeed depends on when you register the event listeners
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("Head - DOMContentLoaded");
});
document.addEventListener("load", function() {
console.log("head - document load");
});
window.addEventListener("load", function() {
console.log("head - window load");
});
</script>
</head>
<body onload="console.log('BODY ONLOAD')">
<h1>Hello World!</h1>
<img onload="console.log('IMG ONLOAD')" src="https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg?2014-01" alt="Smiley face" width="42" height="42" />
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("END - DOMContentLoaded");
});
document.addEventListener("load", function() {
console.log("END - document load");
});
window.addEventListener("load", function() {
console.log("END - window load");
});
</script>
</body>
</html>
would result in
- "Head - DOMContentLoaded"
- "END - DOMContentLoaded"
- "IMG ONLOAD"
- "head - window load"
- "BODY ONLOAD"
- "END - window load"
And not all browsers support document.load.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.