由于 window.onload 事件需要在頁面所有內容（包括圖片等）加載完后，才執行，但往往我們更希望在 dom 一加載完就執行腳本。其實在現在大部分主流瀏覽器上（firefox 3+，opera 9+，safari 3+，chrome 2+）都提供了這一事件方法：adddomloadevent。

document.addeventlistener("domcontentloaded", init, false);

那對于 ie 我們如何模擬 adddomloadevent 事件呢？

matthias miller 最早提供了如下的解決方案：

// for internet explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><//script>");
var script = document.getelementbyid("__ie_onload");
script.onreadystatechange = function() {
    if (this.readystate == "complete") {
        init(); // call the onload handler
    }
};
/*@end @*/

而 diego perini 在其后提供了一種利用 doscroll() 方法來模擬 adddomloadevent 事件的方案，且現在主流的 javascript 框架（jquery、yui等）基本都采用的這一解決方案。

原理基本如下：

當 ondocumentready 事件觸發，文檔（ document ）已經完全解析和建立。如果組件需要操作最初的文檔結構，初始化代碼需被安置在這之后。ondocumentready 事件告知組件，整個頁面已被加載，且在 初始文檔的 onload 事件觸發之前立即觸發。

一些方法，例如 doscroll，要求最初的文檔被完全加載。如果這些方法是初始化函數的一部分，當ondocumentready 事件觸發，他們將被執行。

/*
 *
 * iecontentloaded.js
 *
 * author: diego perini (diego.perini at gmail.com) nwbox s.r.l.
 * summary: domcontentloaded emulation for ie browsers
 * updated: 05/10/2007
 * license: gpl/cc
 * version: tbd
 *
 */

// @w    window reference
// @fn    function reference
function iecontentloaded (w, fn) {
    var d = w.document, done = false,
    // only fire once
    init = function () {
        if (!done) {
            done = true;
            fn();
        }
    };
    // polling for no errors
    (function () {
        try {
            // throws errors until after ondocumentready
            d.documentelement.doscroll('left');
        } catch (e) {
            settimeout(arguments.callee, 50);
            return;
        }
        // no errors, fire
        init();
    })();
    // trying to always fire before onload
    d.onreadystatechange = function() {
        if (d.readystate == 'complete') {
            d.onreadystatechange = null;
            init();
        }
    };
}

jquery 1.3.2 中源碼實現如下：

// if ie and not an iframe
// continually check to see if the document is ready
if ( document.documentelement.doscroll && window == window.top ) (function(){
    if ( jquery.isready ) return;

    try {
        // if ie is used, use the trick by diego perini
        // http://javascript.nwbox.com/iecontentloaded/
        document.documentelement.doscroll("left");
    } catch( error ) {
        settimeout( arguments.callee, 0 );
        return;
    }

    // and execute any waiting functions
    jquery.ready();
})();

yui 2.7.0 中源碼實現如下：

if (eu.isie) {

    // process onavailable/oncontentready items when the
    // dom is ready.
    yahoo.util.event.ondomready(
            yahoo.util.event._trypreloadattach,
            yahoo.util.event, true);

    var n = document.createelement('p');  

    eu._dri = setinterval(function() {
        try {
            // throws an error if doc is not ready
            n.doscroll('left');
            clearinterval(eu._dri);
            eu._dri = null;
            eu._ready();
            n = null;
        } catch (ex) {
        }
    }, eu.poll_interval); 

}

另外對于版本小于 safari 3+ 的 safari 瀏覽器，john resig 也提供了一個解決方案：

if (/webkit/i.test(navigator.useragent)) { // sniff
    var _timer = setinterval(function() {
        if (/loaded|complete/.test(document.readystate)) {
            clearinterval(_timer);
            init(); // call the onload handler
        }
    }, 10);
}

懌飛提示：

1. 如果腳本是動態注入到頁面上，則原生的 domcontentready 事件是不會被觸發（即：ie 除外）。
2. ie 下對于在 iframe 里的使用 adddomloadevent 事件，需做處理和慎用（這一點 yui 做得不如 jquery 細致）。

   // form jquery 1.3.2
   // ensure firing before onload, maybe late but safe also for iframes
   document.attachevent("onreadystatechange", function(){
       if ( document.readystate === "complete" ) {
           document.detachevent( "onreadystatechange", arguments.callee );
           jquery.ready();
       }
   });

擴展閱讀：

• 《adddomloadevent》
• 《window.onload (again)》
• 《iecontentloaded》