DOMContentLoaded for Browsers, Part II

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: 2006 Jul 10 - Fixed Firefox 2.0 problem and added ability to add a custom content ready function, DOMContentLoaded for Browsers, Part III

Update: 2006 Nov 28 - Changed code to support IE and https.

Update: 2006 Nov 21 - Added code to support IE and https.

Update: 2006 Jul 4 - Added Safari and KHTML specific code to load DOMContentLoaded events.

Update: 2006 Jun 26 - Code works in Opera 9. Now you can speed up onload events in most grade A browsers by using DOMContentLoaded/ContentReady events.

Dean Edwards has done it again. Thanks to work done by Matthias Miller, Dean has written a solution that removes the requirement of an external JavaScript file for Internet Explorer. My previous article, DOMContentLoaded for Browsers, used two external JavaScript files, ie_domload.js and events.js file to add DOMContentLoaded events. After adding Dean's new code to allow events.js to run the DOMContentLoadedInit function without an external JavaScript file for IE, I cleaned up the code that calls the DOMContentLoadedInit function to allow for browsers that will, or have added the DOMContentLoaded event. I believe that Opera 9 has added the DOMContentLoaded event. If anyone could test the sample page Opera 9, I would appreciate it.

First the timer function is called for browsers that don't support the DOMContentLoaded event. I had to do it in this order because it was breaking in Opera 8.5.

// Schedule to run the init function.
setTimeout("DOMContentLoadedScheduler()", 250);

I found that sometimes the onload event fires before the timer runs the DOMContentLoadedInit function. Because of that the code adds a call to DOMContentLoadedInit as an onload event.

// Just in case window.onload happens first, add it there too.
addEvent(window, "load", DOMContentLoadedInit);

If your browser supports addEventListener, use addEventListener to call the DOMContentLoadedInit function on DOMContentLoaded.

// If addEventListener supports the DOMContentLoaded event.
if(document.addEventListener)
	document.addEventListener("DOMContentLoaded", DOMContentLoadedInit, false);

Finally for Internet Explorer, create a script call that calls the DOMContentLoadedInit function when the DOM had loaded (DOMContentLoaded).

/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
	document.write("<script id=__ie_onload defer src=\"//:\"><\/script>");
	var script = document.getElementById("__ie_onload");
	script.onreadystatechange = function() {
		if (this.readyState == "complete") {
			DOMContentLoadedInit(); // call the onload handler
		}
	};
	// Clear reference to prevent leaks in IE
	script = null;
/*@end @*/

To use the DOMContentLoaded event, add the following to the head section of your web page.

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

In your script make a call to addEvent.

addEvent(window, 'DOMContentLoaded', myFunction);

The object variable is ignored for DOMContentLoaded events, the window object is used in all cases. It does not work on Netscape 6.2 and the image does not load on IE 5.2 Mac though the events load as expected. It has been tested successfully on a variety of browsers, you can see the browsercam results at DOMContentLoaded.

You can find the source files at:

When the DOM has loaded, your function will be called. On most browsers this occurs before the onload event.

12 Comments

Gravatar Image1. Posted at 6/25/2006 10:58:53 AM by Slim

I just tested it on Opera 9 and it works well! I saw the top portion reporting that the DOM was ready and then after a large image was loaded it proceeded to report that the body onload had fired! This is Great!

Gravatar Image2. Posted at 6/26/2006 1:49:45 PM by Tanny O'Haley

Slim,

I'm glad it works in Opera 9 too.

Thank you,

Gravatar Image3. Posted at 6/27/2006 11:54:05 PM by Tanny O'Haley

I found the problem with IE 5.2 Mac. I was using the same image from the Brothercake article which is a BMP file. It seems humorous to me that a Microsoft product doesn't display a bitmap file. Though it looks like IE 5.2 Mac runs the DOMContentLoaded event as the first onload event from the times on the Browsercam result page.

I changed the picture to a large JPG and it will now display in IE 5.2 Mac.

Gravatar Image4. Posted at 8/1/2006 7:08:29 PM by Diego Perini

Tanny,

I just uploaded a new "DOMComplete" which includes the method and properties described in the post I wrongly sent to the old/previous thread on your site.

It uses the "onactivate" event which seems to fire exactly when we need, before images are loaded.

Have a look here:

{ Link }

for a test case and the JS source.

Let me know if something doesn't work as you expected of if you have suggestions about it.

Gravatar Image5. Posted at 8/2/2006 5:20:37 PM by António Cruz

Hi,

I would like to know if a dynamic script tag I created has already been loaded so I can access its javascript content without getting an error.

My current problem is only with Safari because I'm not succeeding in creating the load event for the dynamic script element in any way for this browser.

I know this discussion has been focused on document.onload but as subjects are related masybe anyone can (please!) help me on this?

Thank you very much,

António Cruz

Gravatar Image6. Posted at 6/20/2007 7:18:37 PM by gardening

I ve got some problems with Mozilla 2.0.

Maybe that's because I run x64 processor?

Gravatar Image7. Posted at 7/7/2007 4:09:27 PM by tennis

I also run a x64 processor and x64 Kubuntu on my laptop. AND , i also have troubles with Firefox 2.0

Gravatar Image8. Posted at 12/28/2007 3:56:07 AM by Erik

Hi,

thanks for your script, looks amazing.

I was triying to add it to a wordpress blog but when i run the code in IE7 i have an alert with "Stack Overflow at line 0".

I was triying running the script alone, with a test.html page, but with same results. Even triying with different computers with different OS, etc...

Did someone notice this error? or is just me with some weird external problem?

PD. I was testing and is right, it's the script that fires the error.

Gravatar Image9. Posted at 12/28/2007 10:53:28 AM by Tanny O'Haley

Hi Erik,

Could you please provide a link to an example? If not, you might want to try eliminating your code and replace it with a simple alert. If the code is calculating sizes of elements, remember that the images haven't been loaded yet and layout may not have triggered so the size will not be available.

Gravatar Image10. Posted at 8/6/2009 12:03:41 PM by Whitney Segura

I hated using Mozilla 2.0, it was terrible compared to all versions of firefox. You have any thoughts on Chrome & how that's doing these days?

Gravatar Image11. Posted at 12/5/2009 12:36:45 AM by Whitney @ Garden of Articles

Hey, its me again. I am just updated my newest experience with the new Firefox browsers. I am liking them so far. I never tried Chrome, not yet anyway. Whats your thoughts?

Gravatar Image12. Posted at 9/25/2010 12:40:59 AM by Rana Bhavna

BTW. I don't think there is anything wrong with the term AJAX. AJAX is about using JavaScript to perform data exchange. DOM Scripting is about modifying document content to give (usually) a visual effect - what we used to call DHTML.The real reason us developers dislike the phrase AJAX is because we didn't think of it. ;-)

Add a comment

Discussion for this entry is now closed.