jQuery原理系列-Dom Ready

ready事件是jquery的一个很重要的功能，在很久很久以前，我们是使用window.onload监听页面加载成功的，onload事件的好处是你不用考虑浏览器兼容性，也不需要依赖任何框架就可以写，但是在正规的项目最好不要用，他的缺陷是触发的太晚了，要等待所有的图片都加载完成才会触发，严重拖慢了整体的加载性能，于是有了DOMContentLoaded，IE自然是不支持的，但是IE有onreadystatechange事件可以达到同样的效果，如果两者都不行，我们还有万能的onload把守最后一个关卡，确保加载成功事件能够触发。jquery源码中为了让IE更早的执行ready，还实现了用定时器不断检测window.doScroll是否存在，这种hack级别的实现不要也罢，其实也比onreadystatechange快不了多少。

 

不多说了，上代码：

 

 

function ready(fn) {
            
            
            function completed(){

                //清除所有的事件监听
                if ( document.addEventListener ) { 
                    document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); 
                    window.removeEventListener( "load", arguments.callee, false ); 
                } else { 
                    document.detachEvent( "onreadystatechange", arguments.callee ); 
                    window.detachEvent( "onload", arguments.callee ); 
                } 
                
                fn();//执行回调
                
            }


            if ( document.readyState === "complete" ) { 
                // 监听时页面已加载完，直接执行，模拟事件触发形式异步执行
                setTimeout( completed ); 
                // DOMContentLoaded 事件绑定
            } else if ( document.addEventListener ) { //高级浏览器
                document.addEventListener( "DOMContentLoaded", completed, false ); 
                window.addEventListener( "load", completed, false ); 

            // IE低版本
            } else { 
                document.attachEvent( "onreadystatechange", function(e){
                     if (document.readyState != 'loading'){
                        completed(e);
                     }
                } ); 
                window.attachEvent( "onload", completed ); 
            }
        

        
    }
    
   // 测试
    ready(function(){
        alert("load")
    })