一般的我們用window.onload()來判斷文件是否載入完成,我們一般採用下面的做法:

當文件載入全部完後,我們在執行程式碼塊(很顯然,當需要載入的文件及節點龐大時,使用者體驗可能會變很差)

window.onload = function () {
   //do something...
}

接下來,我們封裝一個domReady()函式。

讓程式碼塊在dom樹建立完成後就開始執行,而不用等到文件全部載入完成後在執行。

new function(){
    dom = [];
    dom.isReady = false;
    dom.isFunction = function(obj){
        return Object.prototype.toString.call(obj) === "[object Function]";
    };
    dom.Ready = function(fn){
        dom.initReady();//如果沒有建成DOM樹,則走第二步,儲存起來一起殺
        if(dom.isFunction(fn)){
            if(dom.isReady){
                fn();//如果已經建成DOM,則來一個殺一個
            }else{
                dom.push(fn);//儲存載入事件
            }
        }
    };
    dom.fireReady =function(){
        if (dom.isReady)  return;
        dom.isReady = true;
        for(var i=0,n=dom.length;i<n;i++){
            var fn = dom[i];
            fn();
        }
        dom.length = 0;//清空事件
    };
    dom.initReady = function(){
        if (document.addEventListener) {
            document.addEventListener( "DOMContentLoaded", function(){
                document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除載入函式
                dom.fireReady();
            }, false );
        }else{
            if (document.getElementById) {
                document.write ("<script id=\"ie-domReady\" defer='defer' src=\"//:\"><\/script>");
                document.getElementById("ie-domReady").onreadystatechange = function() {
                    if (this.readyState === "complete") {
                        dom.fireReady();
                        this.onreadystatechange = null;
                        this.parentNode.removeChild(this)
                    }
                };
            }
        }
    }
};