javascript之DOMReady

時間 2019-12-08

標籤 javascript domready 欄目 JavaScript 简体版

原文原文鏈接

DOMReady實現策略
* 在頁面的DOM樹建立完成後（即HTML解析第一步完成）就觸發，而無需等待其餘資源的加載，即DOMReady實現策略
* 支持DOMContentLoaded事件的瀏覽器: 就使用DOMContentLoaded事件
* 不支持DOMContentLoaded事件的瀏覽器: 使用Hack兼容
* 經過IE中的document.documentElement.doScroll('left')來判斷DOM樹是否建立完畢html

代碼實現瀏覽器

function myReady(fn){

    if(document.addEventListener){
        document.addEventListener('DOMContentLoaded',fn,false);
    }else{//低版本瀏覽器
        IEContentLoaded(fn);
    }

    //IE模擬DOMContentLoaded
    function IEContentLoaded(fn){
        var d = window.document;
        var done = false;
        //值執行一次用戶的回調函數init();
        var init = function(){
            if(!done){
                done = true;
                fn();
            }
        };

        (function(){
            try{
                //DOM樹未建立完以前調用doScroll會拋出錯誤
                d.documentElement.doScroll('left');
            }catch(e){
                //延遲在試一次，
                //var func = function() { alert(func === arguments.callee);}func();
　　            //執行上述代碼，能夠看到alter出來的結果是true，注意，此處用的是「===」，就是說func與arguments.callee對象類型和值都相等。
                setTimeout(arguments.callee,50);
                return;
            }
            init();
        })();

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

爲何使用domReady來代替onload？dom

* onload是須要等待頁面全部資源都加載完畢，才觸發函數

* domReady是DOM加載完就觸發
spa

咱們下面看個例子code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>domReady</title>
        <script src="domReady.js"></script>
    </head>
    <body>
        <div id="showMsg"></div>
        <div>
            <img src="images/1.jpg"/>
            <img src="images/2.jpg"/>
            <img src="images/3.jpg"/>
        </div>
        <script>
            var d = document;
            var msgBox = d.getElementById('showMsg');
            var imgs = d.getElementsByTagName('img');
            var time1 = null,time2 = null;
            myReady(function(){
                msgBox.innerHTML += "dom已加載！<br>";
                time1 = new Date().getTime();
                msgBox.innerHTML += "時間戳:" + time1 + "<br>";
            });
            window.onload = function(){
                msgBox.innerHTML += "onload已加載！<br>";
                time2 = new Date().getTime();
                msgBox.innerHTML += "時間戳:" + time2 + "<br>";
                msgBox.innerHTML += "domReady比onload快" + (time2 - time1) + "ms<br>";
            };
        </script>
    </body>
</html>

相關標籤/搜索

javascript...function

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。