Menu
Since a single web page may contain lots of external resource: external javascript, external css, images, applets, flash, etc., usually my conventional wisdom tells me that the window.onload event is fired when all the linked resources are finished downloading(though the external resources are usually downloaded in multiple threads or processes by the browser's implementation). The usual case may work in most of the time. But...what if the loading sequence is not what I take it for granted, some javascript bug may creep in somewhere and sometime.
After doing some search, I found it is not the case what i usually think. From this page: https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html, it seems images are not loaded when onload event is fired. But from here window.onload vs <body onload=""/>, it seems to me the images are loaded when onload is fired. There is more more confusion for me from this link http://forums.mozillazine.org/viewtopic.php?f=25&t=413504&start=0&st=0&sk=t&sd=a.
So my first part of the question is: Are all resources REALLY loaded when window.onload is fired?
Another closely related part of the question is: What is the resources loading order before window.onload is fired? I know for internal resources such as internal javascript or css, the loading order is from top of the page to the bottom (unless in IE, use the deferred script as here says Getting notified when the page DOM has loaded (but before window.onload)). But what about external javascript and css resources? For example, if I write my page like this:
<external stylesheet...>
<external javascript #1...>
<external javascript #2...>
<script>
.....
window.onload=....
</script>
Then assuming a function in "external javascript #2" calls a function in "external javascript #1", can i be sure it ALWAYS works? Also if window.onload calls a function in "external javascript #1" also works as expected?
You may say the resource loading sequence and when to fire window.onload event is dependent on the browser implementation, as said here What is the event precedence in JavaScript?. But i am still wondering if there is a spec or convention in the public. So would you please refer me to a resource or tell me the facts to clear my confusion?
495
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
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.).
document. onload event is fired before the window. onload.
Basically, this means that if you are placing stylesheets in the header and javascripts in the footer, your DOM will load all content, structure, and style before the DOMContentLoaded event is fired. That's a good thing! The OnLoad event is triggered when the entire page has loaded.
Check out Cuzillion. It was written by Steve Souders from the Yahoo performance team to evaluate exactly these things.
What it comes down to is this: Browsers load scripts in the order they are encountered in the document and all other loading is halted while each script is downloaded. Other resources (css/images) are loaded asynchronously and you cannot be certain when they will complete.
The onload event fires when the document and it's script/style/image resources are loaded, but you probably don't want to wait for images if you are doing any javascript when the page is loaded. Instead, use something like jQuery's "ready" event or fire your own "DOMReady" event by placing a script tag at the end of the body:
<body>
<!-- your page contents here -->
<script type="text/javascript">
// DOM is ready, do scripty stuff now
DOMReady();
</script>
</body>
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
