What External Resources Are Loaded When Window.onload Event Is Fired And What Is The Loading Order Of The Resources?
Solution 1:
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 --><scripttype="text/javascript">// DOM is ready, do scripty stuff nowDOMReady();
</script></body>Solution 2:
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).
Solution 3:
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.
Post a Comment for "What External Resources Are Loaded When Window.onload Event Is Fired And What Is The Loading Order Of The Resources?"