javascript之DOMReady

DOMReady实现策略
* 在页面的DOM树创建完成后（即HTML解析第一步完成）就触发，而无需等待其他资源的加载，即DOMReady实现策略
* 支持DOMContentLoaded事件的浏览器: 就使用DOMContentLoaded事件
* 不支持DOMContentLoaded事件的浏览器: 使用Hack兼容
* 通过IE中的document.documentElement.doScroll('left')来判断DOM树是否创建完毕

代码实现

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？

* onload是需要等待页面所有资源都加载完毕，才触发

* domReady是DOM加载完就触发

我们下面看个例子

<!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>