DomReady

Here are the docs for DomReady.js.

Functions just like Element.addEvent, but adds the possibility to add the custom event 'domready':

window.addEvent('load', function(){...});

window.addEvent('domready', function(){...});

function myFunction(){...};
window.addEvent('domready', myFunction);

This is an important nuance. Whenever you reference items in the DOM (the Document Object Model), they must already be loaded in the browser. If you had some code like this:

$$('a').each(function(link){
  //this is a silly example
  link.setStyle('color','blue');
});

It won't work unless you execute it after the anchor tags have loaded. So if you put this in the head of your document, this code won't do anything. If you put it in the middle of your doc, you'll catch all the links up to that point.

To get around this you have to execute your code after the page loads. You can use window.addEvent('load', function(){....init code here...}); but the "load" event waits for everything to load - images, css files, whatever.

This is where the event "domready" comes into play. This event fires when the HTML is loaded, even if the other assets (images, etc.) are not. So:

window.addEvent('domready', function(){
  $$('a').each(function(link){
    //this is a silly example
    link.setStyle('color','blue');
  });
});

Will fire as soon as the HTML is ready and all your links will turn blue.

Additionally, if you execute this code after the page loads, it'll just execute immediately. This way you don't have to worry about whether or not the page is ready in your code.