ELO - Encapsulated Load Object - The ultimate way to handle window load events
Updated April 11th
Changed so it will work fine under https as well in Internet Explorer.
If you like this, you might also be interested in DOMAssistant.
Most people who have worked with JavaScript has cursed the time it takes to apply JavaScript to the document (events, for instance) because you’ve waited for the whole document to load. The problem is that we have relied on the onload event to be triggered and that doesn’t happen until all HTML code and every image and other dependency has loaded. In most cases, we want to have our scripts as soon as the DOM has finished loading and not wait for images and their likes.
Therefore, I have with great interest followed the work of Dean Edwards, together with Matthias Miller and John Resig, and the exciting conclusion they came to in window.onload (again).
I really like the gist of it and the implications it brings, but I wanted to make it more flexible for any number of load events. Therefore I created ELO - Encapsulated Load Object.
Description
The idea of ELO is to implement the DOM loading checking principles found out and tested by the gentlemen above, but then be able to call any number of functions you specify.
I usually work with large projects where there are a number of JavaScript files and web developers, and I’m not interesting in fighting with others over just one file where everyone want to add their onload code and functions. Instead, the idea of ELO is to give people the possibility of adding functions, from any file in the web site, to be called as soon as the DOM (i.e. just the HTML code) has loaded.
How to implement it
Basically all you need to do is download the ELO JavaScript file, include it in your web pagea, and then add the functions you want to be called to an array of the ELO object. First, include the file:
<script type="text/javascript" src="js/elo.js"></script>
Then, from the web page or any JavaScript file used, just add your desired functions to the functionsToCallOnload array:
ELO.functionsToCallOnload.push("myFunction()").
Note that the function you want to call should be specified as a string. If you want it to work in IE 5.0, you need to add support for the push method of the Array object:
if(typeof Array.prototype.push != "function"){
Array.prototype.push = ArrayPush;
function ArrayPush(value){
this[this.length] = value;
}
}
Web browser support
I’ve tested it in these web browsers listed below, but I’m fairly convinced it will work in a lot of others as well:
- Internet Explorer 5.x+
- Firefox
- Safari 1.3+
- Opera 8.5+
