Menu
File loader.js:
function main()
{
if (typeof window !== 'undefined') {
var script = window.document.createElement('script')
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js'
script.onload = function () { console.log('script loaded') }
window.onload = function () { console.log('window loaded') }
window.document.head.appendChild(script)
} else {
console.log('window not available yet')
}
}
if (typeof module !== 'undefined' && module.exports) {
exports.main = main
}
main()
File window.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="loader.js"></script>
</head>
<body>
<div>Test</div>
</body>
</html>
Console output when I open this HTML page:
script loaded
window loaded
My question:
In the above code, is it guaranteed that the script onload event always fires before the window onload?
449
Script tags are executed in the order they appear It also means scripts which appear later on the page can depend on things scripts which appear earlier have done. Elements on the page won't render until all the script tags preceding them have loaded and executed.
The onload property processes load events after the element has finished loading. This is used with the window element to execute a script after the webpage has completely loaded. The function that is required to be executed is assigned as the handler function to this property.
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.
The onload event occurs when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
Yes, the output you see is guaranteed, because the load event is fired "when a resource and its dependent resources have finished loading." The window will not be fully loaded until every element with something to download is downloaded and ready, including scripts and images. So, the <script> has to load before the window loads.
The fact that there's a script which is created dynamically won't have an effect (assuming that main is called before the window is fully loaded, like in your code) - once inserted into the DOM, it's now something the window depends on, and so must load before the window does.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
