dom ready 的实现

window.onload事件是等到页面上的所有资源被加载才激活，包括页面上的许多图片、音乐或falsh等资源。如果要做绑定事件、DOM操作某节点等事情，使用window.onload有点太“迟”了，比较影响用户体验。为了解决这个问题，Firefox为DOM纳入一个全新事件DOMContentLoaded，也就是后来所说的DOMReady，是在DOM树构建完毕执行，无需等待其它资源的加载，因此是在onload前加载的。

```
// DOM已加载，比window.onload快，可以有多个，按序执行
jQuery(document).ready(function() {
    ...
});
// 也是在页面所有元素加载完毕后执行的，但是可加载多个函数，并且可以做到js和html完全分离
$(window).load(function() {
    ...
});
$(window).load(function() {
    ...
});
// 页面关闭时引发
$(window).unload(function() {
    ...
});

// IE浏览器没有添加DOMContentLoaded事件，以下是jQuery对该事件的兼容性实现
function domReady() {
    if (readyBound) return;
    readyBound = true;
    if (document.addEventListener) {// 对于非IE的处理
        document.addEventListener("DOMContentLoaded", function() {
            document.removeEventListener("DOMContentLoaded", arguments.callee, false);
            jQuery.ready();
        }, false);
    } else if (document.attachEvent) {// 对于IE的处理
        // 如果是在iframe中，通过document的onReadyStateChange实现
        document.attachEvent("onReadyStateChange", function() {
            if (document.readyState === "complete") {
                document.detachEvent("onReadyStateChange", arguments.callee);
                jQuery.ready();
            }
        });
        // 如果页面不在iframe中，通过setTimeout不断调用documentElement的doScroll方法直到调用成功
        if (document.documentElement.doScroll && typeof window.frameElement === "undefined") {
            (function() {
                if (jQuery.isReady) return;
                try {
                    document.documentElement.doScroll("left");
                } catch(error) {
                    setTimeout(arguments.callee, 0);
                    return;
                }
                jQuery.ready();
            })();
        }
    }
    jQuery.event.add(window, "load", jQuery.ready);
}
```