JavaScript之JS原生方法實現jQuery的ready()

瀏覽器加載頁面的順序：

1、 解析HTML結構

2、 加載外部腳本和樣式表文件

3、 解析並執行腳本代碼

4、 構造HTML DOM模型==ready()

5、 加載圖片等組件

6、 頁面加載完畢==onload()

ready事件是在DOM模型構造完畢時觸發

load事件是在頁面加載完畢後觸發

function ready(fn){
    if(document.addEventListener) {
        document.addEventListener('DOMContentLoaded', function() {
            //註銷事件, 避免反覆觸發
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();            //執行函數
        }, false);
    }else if(document.attachEvent) {        //IE
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();        //函數執行
            }
        });
    }
    };

ready()加強版(自JavaScript權威指南)

/*
 * 傳遞函數給whenReady()
 * 當文檔解析完畢且爲操作準備就緒時，函數作爲document的方法調用
 */
var whenReady = (function() {               //這個函數返回whenReady()函數
    var funcs = [];             //當獲得事件時，要運行的函數
    var ready = false;          //當觸發事件處理程序時,切換爲true
     
    //當文檔就緒時,調用事件處理程序
    function handler(e) {
        if(ready) return;       //確保事件處理程序只完整運行一次
         
        //如果發生onreadystatechange事件，但其狀態不是complete的話,那麼文檔尚未準備好
        if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
            return;
        }
         
        //運行所有註冊函數
        //注意每次都要計算funcs.length
        //以防這些函數的調用可能會導致註冊更多的函數
        for(var i=0; i<funcs.length; i++) {
            funcs[i].call(document);
        }
        //事件處理函數完整執行,切換ready狀態, 並移除所有函數
        ready = true;
        funcs = null;
    }
    //爲接收到的任何事件註冊處理程序
    if(document.addEventListener) {
        document.addEventListener('DOMContentLoaded', handler, false);
        document.addEventListener('readystatechange', handler, false);            //IE9+
        window.addEventListener('load', handler, false);
    }else if(document.attachEvent) {
        document.attachEvent('onreadystatechange', handler);
        window.attachEvent('onload', handler);
    }
    //返回whenReady()函數
    return function whenReady(fn) {
        if(ready) { fn.call(document); }
        else { funcs.push(fn); }
    }
})();
 
//--------------------- test -----
function t1() {
    console.log('t1');
}
function t2() {
    console.log('t2');
}
 
// t2-t1-t2
whenReady(t1);
t2();
whenReady(t2);