[Javascript] Onload event handlers for Safari
Nick Fitzsimons
nick at nickfitz.co.uk
Wed Aug 30 05:55:02 CDT 2006
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/
More information about the Javascript
mailing list