IEContentLoaded

An alternative for DOMContentLoaded on Internet Explorer

The title of this page is adopted from Diego Perini since he has a very interesting and simple solution to detect whether the DOM Tree is ready and safe to be modified before the window.onload Event is fired.

In his code, he used Element.doScroll to check whether the DOM tree of document is available for manipulation, which sounds a little strange and tricky to me until I had revisited the MSDN's documentation, which is also available in his Diego Perini's documentation :

“… A few methods, such as doScroll, require the primary document to be completely loaded. If these methods are part of an initialization function, they should be handled when the ondocumentready event fires. …”

I've tested and realized that this technique seems to work fine and it's not using any DOM insertion like document.write() which is at least implemented by YUI Event Library and Dean Edwards and this may break the DOM rendering if document.write() is called after window.onload.

However, there's one thing in Diego Perini's example bothering me since he checked document.documentElement.doScroll('left'); periodically and it may introduce another side effect:“Page Scrolling”.

After change the example JS a little bit, it turns out that we can simply check the doScroll for any Element event it's not appended to the DOM tree.

So here's the updated JavaScript

(function (){ //check IE's proprietary DOM members if(!document.uniqueID && document.expando) return; //you can create any tagName, even customTag like <document:ready /> var tempNode = document.createElement('document:ready'); (function(){ try { //wait until document.readyState === 'complete'; if(document.readyState != 'complete') return setTimeout(arguments.callee, 0); //see if it throws errors until after ondocumentready tempNode.doScroll('left'); //call your function which catch window.onDocumentReady alert('window.onDocumentReady()'); //relaese some memory, if possible tempNode = null; }catch (err){ setTimeout(arguments.callee, 100); } })(); })();

PS. This script is not for Copy / Paste coders, you should improve the codes to make it compatible with all the modern web browsers and modify it for better performance.

Kudos to Dean Edwards, Diego Perini and all the other amazing developers who keep us moving forward.

Have fun.

Hedger Wang