Document Events In JavaScript

Okay, I was playing around with the DOM Ready vs Window Load events with prototype.js and noticed that in my simple example, the window event actually fired before the dom event in IE8.  This could lead to some issues, especially on cached pages, so I wanted to make a note of it.

    1 var ready = { document: false, window: false };
    2 function DocumentReady() {
    3     alert("Document Ready");
    4 }
    5 function DocumentLoaded() {
    6     alert("Document Loaded");
    7 }
    8 document.observe("dom:loaded", function() {
    9     DocumentReady();
   10     ready.document = true;
   11     if (ready.window)
   12         DocumentLoaded();
   13 });
   14 Event.observe(window, "load", function() {
   15     ready.window = true;
   16     if (!ready.document) return;
   17     DocumentLoaded();
   18 });

The previous example shows how to handle this case. Why is it even an issue? Well, using the DOM ready event will allow you to hide things as soon as the tree has it. Using the window loaded event is necessary in order to handle flowing layouts in terms of size/proportion.