Javascript: Event.onElementReady

We deal with a lot of Javascript at RHG. Rather then create functional one-offs that become hard to maintain and very duplicative, we prefer to have collections of behavior that can be assigned to parts of the document. Our CSS designers especially like this because it makes our markup clean and easy to read. It also means we can have tests that exercise a series of interactions.

However, there is a problem we run into when loading the page over a slow connection: the Javascript is not run until window.onload, meaning our users suffer as they can see part of the page rendered but not use it until it's fully loaded. For those who don't know, window.onload will not execute until all images, CSS, and Javascript files have loaded. Our first solution to this problem was to use onDOMReady. This has worked fairly well and kept our site running reasonably quickly. We've run into problems with onDOMReady in IE6 however, and as a result disabled it in favor of having our pages render all the time. In the IE family of browsers if a script tries to access a part of the DOM before it has been completely processed the browser will raise an exception "operation aborted". After this alert message pops up, the web page becomes unusable and the browser could even crash.

After some careful thinking we decided we would attach our behavior objects in smaller chunks of the DOM. Rather then wait until the window.onload or onDomReady events fire we can use a few inline script tags that call a function that figures out how to attach itself to its most immediate parentNode.

For example, we do this:

<div class="parent">
   <div class="bvr-blah">
   </div>
   <script type="text/javascript">
     RHG.Behavior.attach();
   </script>
</div>

There could be multiple behaviors in the above block of markup that are all contained within the hypothetical div.parent element.

Now, to allow this to work the div.parent must be ready. Otherwise, IE will cancel the whole page rendering with the "Operation Aborted" alert.

Event.onElementReady checks for features of the DOM element to determine whether or not the element is really ready to be manipulatd. Thankfully, IE doesn't mind if you read from an element before it's ready only if you try and modify it. This method will poll the DOM element until either the nextSibling or the textContent is non null.

Object.extend(Event,{
 // check whether or not the DOM element is ready
 onElementReady: function(element,callback)
 {
   if( element && (element.nextSibling || element.textContent) ){
     callback();
   }
   else{
     setTimeout( this.onElementReady.bind(this,element,callback), 1 );
   }
 }
});

Now we can attach our behaviors as the page is rendering and avoid "Operation Aborted" alerts from IE.