Usually the window.onload event is used to start these animations, to start modifying the DOM, etc.. This event however is trigger after the page has been loaded completely including all images, etc.. A domload event, that the browser triggers after the HTML has been loaded completely but before all images were loaded is only supported by Firefox via the DOMContentLoad event type (and IE via the defer atribute of a tag, check out Dean Edwards’ blog posting on that issue).
James Edwards (no idea if he’s in any way related to Dean) had the idea to poll the DOM until it is ready. He wrote a nice library, called the domFunction that does that.
James lib has one major shortfall: It’s API is simply nothing you are used to and it doesn’t use real events when available. So Tanny O’Haley had the idea to simulate the Firefox DOMContentLoaded event functionality via James’ domFunction. Unfortunatly his solution crashes Safari and IE, at least with RuzeeBorders, because it only waits, till the body elements is available which happens pretty soon on these browsers… And before the DOM has been loaded completely.
So I put my hands on it, figured out some tweaks and found a clean, tiny, and simple solution that works cross-browser: RUZEE.Events.
With version 0.2, the domload event is done via the Internet Explorer “defer” hack by Matthias Miller. On Firefox, the default way via the DOMContentLoaded event is used. For Safari and Konqueror, a modified version of John Resig’s (the guy behind jQuery) solution is used – check out Dean Edwards’ again 😉 on that issue.
These are the features of RUZEE.Events:
- Additionally a “domload” event, that gets triggered via DOMContentLoaded when available or simulated if not…
- A cross-browser method to get the source element of an event.
These are the browser I’m testing my releases with (and others may work as well):
- Internet Explorer 5.5, 6.0
- Firefox 1.5
- Safari 2
- Opera 8.5 (via domloadeof DIV)
- KDE Konqueror 3.5
RUZEE.Events require some things in order to work properly with your page. First of all it needs to be included inside your HTML head section:
You may now use the library inside a script section. Here’s an example:
Of course it is also possible to add events to any HTML element in your page. Let’s add some functionality to the element with the ID ‘clickme’ when it get’s clicked:
If you want to support Opera 8.x or other browsers where the other used methods won’t work, the last element of the body needs to be the following DIV:
... your page ... <div id="domloadeof" style="display:none"></div> </body>
It will not be visible, hence will not kill your layout ;-), but it is that element that RUZEE.Events use to determine, when the DOM has been loaded completely if it needs to simulate the event.
Please download RUZEE.Events v0.2, try it, and post your feedback at the end of this page. The license is included in the release – it’s MIT-style.
- v0.2 (2006-06-16):
- The externel defer script for IE is no longer needed.
- The domloadeof DIV is only required, if you want to support Opera 8.x.
- RUZEE.Events.add now works, even if the browser does not support attachEvent or addEvent.
- v0.1 (2006-05-16):
- Initial release.
Known Bugs and Limitations
None right now…