Category Archives: HTML5

DOMContentLoaded is finally here!

DOMContentWhat?

DOMContentLoaded. It’s an event like the (on)load event that fires once an HTML document has finished loading, but it is tons more useful than the good old load. You see the problem with the load event is that it fires after the complete page has finished loading, including any embedded resources such as images. This is usually not what we actually want in Javascript, because it will make our scripts wait for the last image to load before coming into action, making our page seem slower than it could be.

What we want instead is for our script to fire as soon as the HTML document itself has finished loading, but before all the images have actually loaded. We just want to make sure the DOM is complete so we can safely manipulate it.

Enter DOMContentLoaded.

Browser support

DOMContentLoaded was first introduced by Mozilla and slowly has gathered more following. It was implemented by Opera and Webkit (which also means Safari and Google Chrome), so it was supported by all browsers except of course Internet Explorer. So we had this very useful event but couldn’t rely on it because the browser with the largest market share did not support it. But that has finally changed! And we have HTML 5 to thank for it!

Standardization

As part of the HTML 5 effort the W3C is standardizing the DOMContentLoaded event and other actions that the browser is supposed to perform when it reaches the end of the HTML document in section 8.2.6 of the HTML 5 specification. And because Internet Explorer 9 is betting heavily on supporting HTML 5, they have implemented DOMContentLoaded! You can test drive it here.

Supporting old browsers

So there you have it. DOMContentLoaded is now supported by all major browsers. It will of course still take some time before the old browsers have disappeared from the scene so we will still have to support fallback code for some time to come. For that reason Packages JS, my personal stab at a modular Javascript framework, comes with a version of the famous addEvent and removeEvent functions in the package dom.event that transparently support DOMCOntentLoaded on old and new browsers alike, always giving the best possible result for the browser the script is actually running on. But that’s for another post.

Advertisements