domReady的實現策略

實現策略

window.onload

當頁面和資源完全加載完畢後執行
<script>
    window.onload = function(){
    .....
}
</script>

缺點：如果外部文檔很多的時候加載緩慢，則會影響代碼執行。

jQuery方法

DOMReady的jQ實現策略

---

在頁面的DOM樹創建完成以後（也就是HTML解析第一步完成）即觸發，而無需等待其他資源的加載。即DOMReady實現策略：
1.支持DOMContenLoaded事件的，就使用DOMContentLoaded事件
2.不支持的，就使用來自Digo Perini發現的著名Hack兼容

---

domReady的實現函數

//fn是個回調函數
function myReady(fn){

    //對於現代瀏覽器，對DOMContentLoaded事件的處理採用標準的事件綁定方式
    if(document.addEventListener){
        document.addEventListener("DOMContentLoaded", fn, false);
    }else{
        IEContentLoaded(fn);
    }

    //IE模擬DOMContentLoaded
    function IEContentLoaded(fn){
        var d = window.document;
        var done = false;//執行的flag

        //只執行一次用戶的回調函數init()
        var init = function(){
            if(!done){
                done = true;
                fn();//回調執行函數
            }
        };
        (function(){
            try{
                //DOM樹未創建之前調用doScroll會拋出錯誤
                d.documentElement.doScroll(left);
            }catch(e){
                //延遲再試一次
                setTimeout(arguments.callee,50);
                return;
            }
            //沒有錯誤就表示DOM樹創建完畢，然後立馬執行用戶回調
            init();
        })();

        //監聽document的加載狀態
        d.onreadystatechange = function(){
            //如果用戶是在domReady之後綁定的函數，就立馬執行
            if(d.readyState == 'cjomplete'){
                d.onreadystatechange = null;
                init();
            }
        }       
    }
}