nonzero

Today I ran into the IE6 window.onload issue and subsequently came across Dean Edwards et al’s solution via Google. This solution was posted in 2006, and since then YUI and other JavaScript frameworks have gained popularity, but I still prefer the ad-hoc “non-framework” approach. YUI is a comprehensive framework and technically outstanding in terms of modularity and cross-browser compatibility. It facilitates callbacks and offers lots of configuration options in its high level components. However, it’s not perfect.

For example, I tried using the YUI AutoComplete control in a DIV element that hopped around the DOM tree depending on the state of the application. After moving from its original position, YUI failed to keep track of the control and it became unresponsive. Because the YUI codebase is such a beast, patching was not feasible. I ended up writing my own simple autocomplete control.

Additionally, even with its modular “include only what you need” approach, YUI is heavy. Getting back to the onload issue, if I wanted to use YUI’s onDOMReady method, I’d be pushing roughly 20kb of js to the end user—and that’s minified. By contrast, Edwards’ init.js amounts to around 2kb (with comments and not minified) and does not bloat the DOM with an extra namespace other than init.

However #2, in the version I downloaded, init.js provides no way to add onload events dynamically—you have to edit init.js itself. As a simple upgrade, I introduced an add method to init which allows you to push functions onto a queue which get called in succession in the main init() function. The add method has the following usage:

init.add(fn, context, param1, param2, param3, etc);

where

• fn is a function reference
• context is the execution context (optional)
• paramN are function parameters (optional)

Download the upgraded version of init.js here.

Feedback appreciated!