Tanny O'Haley's Weblog

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.

domReady(handler);

Check out the sample.

Samples and Download

• domready.htm
• addevent.js
• domready.js

Related Articles

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

Monday, May 26th, 2008 03:05:48 PM in  Web Development