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")

    })

巴特西

jQuery原理系列-Dom Ready

最新文章

热门文章