DOMContentLoaded for Browsers, Part IV

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: 2008 Feb 14 - Added support for Vista 64 per Goran Miskovic's comment.

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 didn't provide a way to handle calls to it after the DOMContentLoaded event handler ran. If a developer called addEvent(window, "DOMContentLoaded", myFunction) after the DOMConentLoaded event ran, the passed function would never run. This version fixes the problem so that even if you call addEvent for the DOMContentLoaded event and the DOMContentLoaded event handler has already run, it will run your function.

The previous addDOMLoadEvent function would simply add the passed function to an array of functions which would be handled by the DOMContentLoadedInit function on the DOMConentLoaded event.

// Function that adds DOMContentLoaded listeners to the array.
function addDOMLoadEvent(listener) {
	window.onDOMLoadEvents[window.onDOMLoadEvents.length]=listener;
}

The addDOMLoadEvent function now checks to see if the DOMConentLoaded event has run, and if it has, runs the passed function.

// Function that adds DOMContentLoaded listeners to the array.
function addDOMLoadEvent(listener) {
	// If the DOMContentLoaded event has happened, run the function.
	if(window.DOMContentLoadedInitDone){
		listener();
		return;
	}

	window.onDOMLoadEvents[window.onDOMLoadEvents.length]=listener;
}

Samples and Download

Related Articles

2 Comments

Gravatar Image1. Posted at 2/14/2008 2:37:11 AM by Goran Miskovic

Great work!

In order to correctly work on Vista 64 and/or on SSL IE conditional statement needs to be changed slightly:

/* for Internet Explorer */

/*@cc_on @*/

/*@if (@_win32 || @_win64)

var proto = "src='javascript:void(0)'";

if (location.protocol == "https:") proto = "src=//:";

document.write("<scr"+"ipt id=__ie_onload defer " +

proto + "><\/scr"+"ipt>");

var script = document.getElementById("__ie_onload");

script.onreadystatechange = function() {

if (this.readyState == "complete") {

DOMContentLoadedInit(); // call the onload handler

}

};

/*@end @*/

Thanks.

Gravatar Image2. Posted at 2/22/2008 10:06:41 AM by Dirk Fischer

Hi, Tanny, first thanks for your work.

I read, tested and came to a solution for a more integrated DOMContentLoaded.

You will find a test with the code (special thanks Tanny :-) on DOMContentLoaded Sample Page. It also includes an all browser solution for overwriting of the onload statement.

Add a comment

Discussion for this entry is now closed.