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();
            }
        }       
    }
}