[Javascript] Onload event handlers for Safari

[nick at nickfitz.co.uk (Nick Fitzsimons)]

On 30 Aug 2006, at 10:47, Guillaume wrote:

>>
>> What Dean's (and others') technique does is allow one to start  
>> one's  script when the page has been _parsed_ into a DOM, which is  
>> not the  same thing as when it has _loaded_. This means that  
>> (assuming you  don't try to do too much) you can get all your  
>> initialisation in  place before the page is displayed to the user,  
>> and long before the  onload event fires.
>
>
> For Safari only... ? Or is this true also for Mozilla and Opera ?
>

The code Dean presents combines the necessary techniques to get it  
working in IE/Win, Firefox/Mozilla, Safari and (at least version 9  
of) Opera. On other browsers it simply falls back to using the onload  
event.

The techniques required by the different browsers can be categorised as:

1. The DOMContentLoaded event introduced by Mozilla (i.e. Firefox et  
al.) is also supported by Opera 9, and is used if at all possible;

2. IE/Win will behave similarly with a script marked with the "defer"  
attribute; Dean's script uses a technique donated by Matthias Miller,  
which employs a Microsoft-proprietary extension to the JS parser  
(similar to conditional comments in HTML) to write out the necessary  
script tag - other browsers will just see this code as a comment, and  
therefore ignore it;

3. On Safari (and other browsers using Apple's WebKit rendering  
engine), the script uses a technique from John Resig of JQuery fame,  
which employs "setInterval" to check the page's readystate every 10  
milliseconds, to see if it's been parsed yet;

4. All browsers get an onload handler set, so if all else fails, that  
will run;

5. Whichever way the browser comes to the code, it first checks to  
see if it's already been executed - this means that when one of the  
above browsers gets the early opportunity to run the code, and then  
later comes to execute it again because of the onload handler from  
step 4, it knows not to bother as it's already done it. Browsers for  
which none of the above techniques work will just run the "onload"  
event handler as normal.

I believe that the technique is being included in a number of  
JavaScript libraries such as JQuery and Prototype; also, there are  
links from the comments on Dean's post which demonstrate how to chain  
multiple functions on to the one event, how to wrap it all up in an  
object-oriented way, and so forth. All in all it's a solid bit of  
code, and I'm already looking into updating some of my clients' sites  
with it to improve their visitors' experience. (I don't suppose the  
visitors will ever notice, but I'll feel better :-)

HTH,

Regards,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/