Defer attribute and onload event
Question
Having the code below:
<html>
<head>
<script>
function elem_onload() {
console.log("elem_onload");
};
</script>
</head>
<body onload="elem_onload()">
<script type="text/javascript" src="script.js" defer></script>
</body>
</html>
script.js:
console.log("external script");
the defer attribute doesn't seems to work. The output is:
external script
elem_onload
whether with or without defer attribute. Shoudn't it be
elem_onload
external script
with defer defined?
Duplicated answer!?
I'd like to state that my answer isn't duplicate of
How exactly does <script defer=“defer”> work?
The referenced recommended answer is about inline script where the browser behavior is clear for me - it simply ignores defer . My question is about external script in which case the browser should execute the external deferred script
after the document has been parsed
as documentation states hence after onload event.
So I'm waiting for an appropriate answer...
2 answers
solution1
4 ACCPTED 2016-01-12 21:36:29
The external script deferred by the defer attribute is executed before the ( DOMContentLoaded ) is fired, ie when the initial HTML document has been completely loaded and parsed. The onLoad attribute on a <body> tag, on the other hand, fires only when a web page is fully loaded.
Therefore, the defer attribute is indeed working. You may test it by trying the two cases below. In both cases the content of script.js file should be this:
console.log(document.getElementById('sample').innerHTML);
CASE 1 HTML - with defer --> logs "Sample text"
<body onLoad="elem_onload()">
<script type="text/javascript" src="script.js" defer></script>
<div id="sample">Sample text</div>
</body>
CASE 2 HTML - without defer --> logs an error
<body onLoad="elem_onload()">
<script type="text/javascript" src="script.js"></script>
<div id="sample">Sample text</div>
</body>
solution2
-1 2016-01-13 09:27:18
Thx. all for help.
So the statement "...after the document has been parsed" from original doc. ( MDN <script> tag ) refers say step #0 from 12.2.6 The end
when document is completely parsed and now there are several tasks to be done on that occasion. Those tasks includes running external deferred scripts which is prior (#3) to onload event.
Am I right?
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.