IE模拟addDOMLoadEvent和jQuery的ready实现

由于 window.onload 事件需要在页面所有内容（包括图片等）加载完后，才执行，但往往我们更希望在 DOM 一加载完就执行脚本。其实在现在大部分主流浏览器上（Firefox 3+，Opera 9+，Safari 3+，Chrome 2+）都提供了这一事件方法：addDOMLoadEvent。

document.addEventListener("DOMContentLoaded", init,false);

dom渲染完成，doScroll方法从不能执行到可执行，这样我们在IE中，利用 doScroll()方法来模拟 addDOMLoadEvent 事件，现在主流的 JavaScript 框架（JQuery、YUI等）基本都采用的这一解决方案。

/*
 *
 * IEContentLoaded.js
 *
 * Author: Diego Perini (diego.perini at gmail.com) NWBOX S.r.l.
 * Summary: DOMContentLoaded emulation for IE browsers
 * Updated: 05/10/2007
 * License: GPL/CC
 * Version: TBD
 *
 */
// @w    window对象的引用
// @fn   回调函数
function IEContentLoaded(w, fn) {
    var d = w.document,
    done = false,
    // 只执行一次
    init = function() {
        if (!done) {
            done = true;
            fn();
        }
    }; // 循环执行，直到无错误
    (function() {
        try { // 一直抛出错误，直到dom渲染结束
            d.documentElement.doScroll('left');
        } catch(e) {
            setTimeout(arguments.callee, 50);
            return;
        } // 没有错误，执行函数
        init();
    })(); // 双重保险，绑定事件
    d.onreadystatechange = function() {
        if (d.readyState == 'complete') {
            d.onreadystatechange = null;
            init();
        }
    };
}

参考于 http://www.planabc.net/2009/07/30/adddomloadevent/

 

jQuery1.4.4中ready实现

jQuery.fn = jQuery.prototype = {
    // ...
    ready: function( fn ) {
            // 绑定上监听事件
            jQuery.bindReady();

            // 如果dom已经渲染
            if ( jQuery.isReady ) {
                // 立即执行
                fn.call( document, jQuery );

            // 否则，保存到缓冲队列，等上面的监听事件触发时，再全部执行
            } else if ( readyList ) {
                // 将回调增加到队列中
                readyList.push( fn );
            }

            return this;
        },
    // ...
};    
jQuery.extend({
// ...
    // dom是否渲染完成标志
    isReady: false,

    // 一个计数器，用于跟踪在ready事件出发前的等待次数
    // 预留，支持于更高版本jQuery提供的ready等待方法
    readyWait: 1,
    
    // 文档加载完毕句柄,dom渲染完成后执行
    ready: function( wait ) {
        // A third-party is pushing the ready event forwards
        if ( wait === true ) {
            jQuery.readyWait--;
        }

        // Make sure that the DOM is not already loaded
        if ( !jQuery.readyWait || (wait !== true && !jQuery.isReady) ) {
            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
            // 确保body元素存在，这个操作是防止IE的bug
            if ( !document.body ) {
                return setTimeout( jQuery.ready, 1 );
            }

            // dom渲染完成标志设置为true
            jQuery.isReady = true;

            // If a normal DOM Ready event fired, decrement, and wait if need be
            if ( wait !== true && --jQuery.readyWait > 0 ) {
                return;
            }

            // 绑定的渲染完成后的执行函数
            if ( readyList ) {
                // 全部执行
                var fn,
                    i = 0,
                    ready = readyList;

                // 重置
                readyList = null;

                while ( (fn = ready[ i++ ]) ) {
                    fn.call( document, jQuery );
                }

                // 触发所有ready事件
                if ( jQuery.fn.trigger ) {
                    jQuery( document ).trigger( "ready" ).unbind( "ready" );
                }
            }
        }
    },
    // 初始化readyList事件处理函数队列
    // 兼容不同浏览对绑定事件的区别
    bindReady: function() {
        if ( readyBound ) {
            return;
        }

        readyBound = true;

        // $(document).ready()的嵌套调用时
        // readyState: "uninitalized"、"loading"、"interactive"、"complete" 、"loaded"
        if ( document.readyState === "complete" ) {
            // 让它异步执行，使这个ready能延迟
            return setTimeout( jQuery.ready, 1 );
        }

        // Mozilla, Opera and webkit 
        // 兼容事件，通过检测浏览器的功能特性，而非嗅探浏览器
        if ( document.addEventListener ) {
            // 使用事件回调函数
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
            
            // 绑定回调到load,使之能一定执行
            window.addEventListener( "load", jQuery.ready, false );

        // IE
        } else if ( document.attachEvent ) {
            // 确保在load之前触发onreadystatechange,
            // 针对iframe情况，可能有延迟
            document.attachEvent("onreadystatechange", DOMContentLoaded);
            
            // 绑定回调到一定执行能load事件
            window.attachEvent( "onload", jQuery.ready );

            // 如果是IE且非iframe情况下
            // 持续的检查，看看文档是否已准备
            var toplevel = false;

            try {
                toplevel = window.frameElement == null;
            } catch(e) {}

            if ( document.documentElement.doScroll && toplevel ) {
                doScrollCheck();
            }
        }
    },

// ...
});    
if ( document.addEventListener ) {
    DOMContentLoaded = function() {
        document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        jQuery.ready();
    };

} else if ( document.attachEvent ) {
    DOMContentLoaded = function() {
        // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
        if ( document.readyState === "complete" ) {
            document.detachEvent( "onreadystatechange", DOMContentLoaded );
            jQuery.ready();
        }
    };
}
// IE循环检查dom是否渲染完毕
function doScrollCheck() {
    if ( jQuery.isReady ) {
        return;
    }

    try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    } catch(e) {
        setTimeout( doScrollCheck, 1 );
        return;
    }

    // 执行在等待的函数
    jQuery.ready();
}

 将jQuery的ready方法剥离出，提取为函数ready及测试例子

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script type="text/javascript">
        (function(window, undefined) {
            var readyList = [],
                    isReady = 0,
                    readyBound = false,
                    init,
                    bindReady,
                    readyWait = 1;
            init = function(wait) { // A third-party is pushing the ready event forwards
                if (wait === true) {
                    readyWait--;
                } // Make sure that the DOM is not already loaded
                if (!readyWait || (wait !== true && !isReady)) { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                    // 确保body元素存在，这个操作是防止IE的bug
                    if (!document.body) {
                        return setTimeout(init, 1);
                    } // dom渲染完成标志设置为true
                    isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be
                    if (wait !== true && --readyWait > 0) {
                        return;
                    } // 绑定的渲染完成后的执行函数
                    if (readyList) { // 全部执行
                        var fn, i = 0,
                                ready = readyList; // 重置
                        readyList = null;
                        while ((fn = ready[i++])) {
                            fn.call(document);
                        }
                    }
                }
            }; // 初始化readyList事件处理函数队列
            // 兼容不同浏览对绑定事件的区别
            bindReady = function() {
                if (readyBound) {
                    return;
                }
                readyBound = true; // $(document).ready()的嵌套调用时
                // readyState: "uninitalized"、"loading"、"interactive"、"complete" 、"loaded"
                if (document.readyState === "complete") { // 让它异步执行，使这个ready能延迟
                    return setTimeout(init, 1);
                } // Mozilla, Opera and webkit
                // 兼容事件，通过检测浏览器的功能特性，而非嗅探浏览器
                if (document.addEventListener) { // 使用事件回调函数
                    document.addEventListener("DOMContentLoaded",
                            function() {
                                document.removeEventListener("DOMContentLoaded", arguments.callee, false);
                                init();
                            },
                            false); // 绑定回调到load,使之能一定执行
                    window.addEventListener("load", init, false); // IE
                } else if (document.attachEvent) { // 确保在load之前触发onreadystatechange,
                    // 针对iframe情况，可能有延迟
                    document.attachEvent("onreadystatechange",
                            function() { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                                if (document.readyState === "complete") {
                                    document.detachEvent("onreadystatechange", arguments.callee);
                                    init();
                                }
                            }); // 绑定回调到一定执行能load事件
                    window.attachEvent("onload", init); // 如果是IE且非iframe情况下
                    // 持续的检查，看看文档是否已准备
                    var toplevel = false;
                    try {
                        toplevel = window.frameElement == null;
                    } catch(e) {}
                    (function() {
                        if (document.documentElement.doScroll && toplevel) {
                            if (isReady) {
                                return;
                            }
                            try { // If IE is used, use the trick by Diego Perini
                                // http://javascript.nwbox.com/IEContentLoaded/
                                document.documentElement.doScroll("left");
                            } catch(e) {
                                setTimeout(arguments.callee, 1);
                                return;
                            } // 执行在等待的函数
                            init();
                        }
                    })();
                }
            };
            window.ready = function(fn) { // 绑定上监听事件
                bindReady(); // 如果dom已经渲染
                if (isReady) { // 立即执行
                    fn.call(document); // 否则，保存到缓冲队列，等上面的监听事件触发时，再全部执行
                } else if (readyList) { // 将回调增加到队列中
                    readyList.push(fn);
                }
            };
        })(window);
        ready(function(){
            var inp = document.getElementById('inp');
            console.log(inp.nodeName);
        });
        ready(function(){
            console.log('second ready');
            ready(function(){
                console.log('in the second ready')
            })
        })
    </script>
</head>
<body>
  <input type="text" id="inp"/>
</body>
</html>
        <script type="text/javascript">
            ready(function(){
                console.log('third ready');
            });
        </script>

 平时测试简单方法

 

// 来源于 http://www.planabc.net/2011/05/26/domready_function/
function domReady(fn) {
    // "uninitalized"、"loading"、"interactive"、"complete" 、"loaded"
    /in/.test(document.readyState) ? window.setTimeout(function() { domReady(fn); }, 10) : fn();
}