jquery ready方法實現原理

        先看這兩句代碼：
        window.addEventListener('load',loaded,false);
        document.addEventListener('DOMContentLoaded',loaded,false);

        總結：
        load事件是在頁面全部元素都加載完後觸發;
        DOMContentLoaded，它是指dom tree加載完就觸發;防止了頁面加載被堵塞。
    
        DOMContentLoaded事件（IE9+以及其餘瀏覽器）
        onreadystatechange事件（IE9如下瀏覽器）

 

今天閒來無事研究研究jquery.ready()的內部實現，看JQ的源碼一頭霧水，因爲本身很菜了，因而翻了翻牛人的播客，講述詳細，收穫頗多。

先普及一下jquery.ready()和window.onload，window.onload事件是在頁面全部的資源都加載完畢後觸發的. 若是頁面上有大圖片等資源響應緩慢, 會致使window.onload事件遲遲沒法觸發.因此出現了DOM Ready事件. 此事件在DOM文檔結構準備完畢後觸發, 即在資源加載前觸發.

var $ = ready = window.ready = function(fn){  
    if(document.addEventListener){//兼容非IE  
        document.addEventListener("DOMContentLoaded",function(){  
            //註銷事件，避免反覆觸發  
            document.removeEventListener("DOMContentLoaded",arguments.callee,false);  
            fn();//調用參數函數  
        },false);  
    }else if(document.attachEvent){//兼容IE  
       IEContentLoaded (window, fn);
    }  

    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();
            }
        };
    }
}
ready(function(){alert(1)})