What external resources are loaded when window.onload event is fired and what is the loading order of the resources?

Question

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: http://articles.techrepublic.com.com/5100-10878_11-5214317.html, it seems images are not loaded when onload event is fired. But from here http://stackoverflow.com/questions/191157/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 http://stackoverflow.com/questions/65434/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 http://stackoverflow.com/questions/282245/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?

Answer 1

Script resources are loaded before onload fires. However imgs load in a lazy asynchronous manner not necessarily in the order they are listed in the document.

I've also found at least on IE that not all the DOM element properties are correctly calculated at load, (e.g., client and offset sizes can be still be 0 when they should have a value).

Answer 2

The SO link you provided is a bit mislead; body onload and window onload both call the same EVENTS, but the events do not fire at the same time. Window.onload will fire before body onload in the manner your first resource explains.

For interpreting reasons, browsers request javascript resources in serial, where as they can request everything else in parallel. This is why sometimes you'll load a page, and images will load out of order, while javascript, barring the ie circumstance you mentinoed, loads in order. So yes, the resources will be loaded.

Additionally, browsers evaluate js functions first, so you shouldn't have any problems calling a function before it's explicitly define. However, this will not work with variables.

One last thing, CSS is interpreted top down; no matter how they're loaded the browser will interpret rules starting at the top and working its way down.

Answer 3

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>