“DOM ready事件绑定” 在 “异步加载” 中暴露的问题及解决方案（精华帖）
“DOM ready事件绑定” 在 “异步加载” 中暴露的问题及解决方案（精华帖）
DOM ready：
DOM ready（也称document ready），是一个被广泛用于代替window.onload的事件（准确的讲是一种状态）。对其不是很熟悉的朋友可以
看这里：比window.onload更好的方式（document ready）
在异步加载中的问题：
当一个绑定了DOM ready事件的脚本（绑定方式可参见：window.onload更好的方式（document ready） ）采用异步的方式加载（相关链
接：异步加 载JS的五种方式（详解） ）时，会发生这样的问题：脚本加载完成时，DOM ready事件已经触发过了，这就意味着这个脚本将不
会被执行。这个问题非常棘手，也很容易碰到，那么如何解决呢？你一定会想到，在脚本中加上这样的逻辑“如果DOM ready已经触发，那么
直接执行脚本，如果尚未触发，则向DOM ready事件绑定该脚本”。没错，这样一来这个问题就可以被解决了，但是还有新的问题，那就是如
何知道DOM ready事件已经触发了呢？jQuery则回避了这个问题，它采用了这种方式：做一个双重保险，如果DOM ready错过了那就退而使
用document.readyState == "complete"来作为脚本执行的时间起点。但这种方式显然大打折扣了（因为document.readyState ="complete"
的触发时间几乎和window.onload同时，当页面中有大量图片资源时问题就非常严重了。关于这些事件的触发时间对比，可见：window.onl -
-oad 更 好的方式（document ready） ）。
更好的方法：
首先我们来分析一下各个浏览器的特性，在Firefox和Chrome中document.readyState值为interactive时DOM树就已经ready了，而IE不会出现
前面所讲的问题（因为我们是使用document.documentElement.doScroll来定时检测的），在Opera下document.readyState=="complete"和
DOM ready几乎是同时触发的（因此可以直接用document.readyState=="complete"来判断）。有了这些特性，这个问题就迎刃而解了（详
细请看下面的代码）。
Javascript代码：
(function(d, f){
if(window.attachEvent){
(function(){
try{
d.documentElement.doScroll("left");
}catch(err){
setTimeout(arguments.callee, 1);
return;
}
f();
})();
}else{
if((d.readyState == "interactive") && (!!alert) || (d.readyState == "complete")){
f();
}else{
function _f(){
d.removeEventListener("DOMContentLoaded", _f, false);
f();
}
d.addEventListener("DOMContentLoaded", _f, false);
}
}
})(document, main);
代码讲解：
1. 在Firefox和Chrome中，document.readyState=="interactive"时就已经DOM ready了。
2. 在IE中，在DOM ready之前调用document.documentElement.doScroll("left")都会报错，因此使用循环和try...catch来捕捉DOM ready。
3. 在Opera中，document.readyState=="interactive"时alert是不可访问的，因此!!alert将返回false。
4. main是我们所要向DOM ready绑定的函数。
注意事项：
document.readyState == "interactive" 是在DOMContentLoaded事件之前（会早几毫秒）触发的，不过在Chrome和Firefox中，这个时候确
实已经可以完全访问并操作（appendChild、removeChild）DOM元素了（即DOM tree已经ready）。
本文转自http://hi.baidu.com/flondon/item/247985275ba2833694f62b9a