DOMContentLoaded for Browsers, Part III

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

Related Articles

5 Comments

Gravatar Image1. Posted at 8/17/2007 8:31:40 AM by qureyoon

this is a very nice tweak :)

thanks for sharing ^^

Gravatar Image2. Posted at 8/21/2007 4:42:31 AM by Andy Beeching

Excellent work!! Thanks for updating the script to update to reflect the changes by Dean, this is a great help for crafting snappy interfaces, and avoid the onload problem. Some nice workarounds and well documented. Cheers!

Gravatar Image3. Posted at 9/6/2007 9:34:31 AM by Phil Burrows

Impressive and useful; as always. thanks for your hard work.

Gravatar Image4. Posted at 12/10/2007 12:12:42 PM by Konstantin Pelepelin

Link to "DOMContentLoaded Event for Browsers, Part IV" is wrong

Gravatar Image5. Posted at 12/11/2007 10:10:58 AM by Tanny O'Haley

Konstantin,

The link is fixed.

Thank you

Add a comment

Discussion for this entry is now closed.