DOMContentLoaded for Browsers, Part V

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

For those of you that don't know what the DOMContentLoaded event can do for you, here's a brief description.

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.

When I originally added the DOMContentLoaded event handler to Dean Edwards' addEvent function, I wanted it to be just another addEvent type. Since then I've changed my mind and created a domReady() function. By separating domReady in its own module, it can used with most frameworks.

Add a script element that references domready.

<script type="text/javascript" src="js/domready.js"></script>

Now make a call in your script.


Check out the sample.

Samples and Download

Related Articles


Gravatar Image1. Posted at 09/13/2008 11:53:32 by hitesh


Gravatar Image3. Posted at 05/03/2009 10:32:36 by jon

This is exactly what I was looking for.... many thanks.

Gravatar Image4. Posted at 07/30/2009 15:55:13 by Noah

Exactly what I was looking for, and without any library baggage. Thank you so much!

Add a comment

Discussion for this entry is now closed.