Update: 2014 March 19 - domReady version II has been created that provides a streamlined domReady function.

Update: 2008 June 13 - DOMContentLoaded for Browsers, Part V has been created that provides a domReady function without the overhead of the Dean Edwards' events code. If you're a prototype user you should check out Prototype JavaScript framework: document.observe which in version 1.6.0 gives you a dom:loaded event. If you don't have 1.6.0 or above of prototype or don't like their solution, check out domready.js in DOMContentLoaded for Browsers, Part V.

Update: 2007 Oct 25 - DOMContentLoaded Event for Browsers, Part IV has been created that adds a fix for calling DOMContentLoaded after the DOMContentLoaded event has occurred. Please check it out.

The DOMContentLoaded event allows you to add behavior or change the HTML of a page after the HTML has loaded and before the onload event which happens after the complete page, including images has loaded. This allows you to add menu, tree behavior, AJAX functionality or anything else without having to wait for all items on a page to load. You may have experienced the need for a DOMContentLoaded event on a page that includes drop down menus or a tabbed interface which doesn't work until all images have loaded. Using the DOMContentLoaded event allows you to add the behavior before images and objects have loaded.

In this version I have "fixed" a problem with DOMContentLoaded firing before the HTML was loaded in Firefox 2.0 and added the ability for you to add a custom content is loaded function. The Firefox 2.0 problem was caused because I was trying to determine if the HTML of a page had loaded with a timer function. I used a code fragment from James Edwards' domFunction to determine if the HTML of a page was loaded for browsers that don't support defer (IE), a DOMContentLoaded event (Firefox or Opera 9) or aren't using KTHML or webkit. I have changed the code to stop checking to see if the body is loaded as it isn't reliable in Firefox 2.0.

A non-supported browser will use onload or you can create a custom function that will tell the DOMContentLoadedScheduler() function that the HTML of the page is loaded. If you decide to use a custom function, it should check for the existence of the last element on your page. In the following instance, a div element at the end of the page with an id of footer.

function DOMContentLoadedCustom() {
 if(typeof document.getElementById != "undefined" 
   && document.getElementById("footer")){
  // Content is ready.
  return true;
 }

 // Content is not ready.
 return false;
}

The DOMContentLoaded event has been tested successfully on a variety of browsers, you can see the browsercam results at DOMContentLoaded 2a.

Samples and Download

• DOMContentLoaded.htm
• events.js

Related Articles

• DOMContentLoaded Event for Browsers
• DOMContentLoaded for Browsers, Part II