一些主流JS框架中DOMReady事件的实现小结

原来比较常用的是window的onload 事件，而该事件的实际效果是：当页面解析/DOM树建立完成，并完成了诸如图片、脚本、样式表甚至是iframe中所有资源的下载后才触发的。这对于很多 实际的应用而言有点太“迟”了，比较影响用户体验。为了解决这个问题，ff中便增加了一个DOMContentLoaded方法，与onload相比，该 方法触发的时间更早，它是在页面的DOM内容加载完成后即触发，而无需等待其他资源的加载。Webkit引擎从版本525（Webkit nightly 1/2008:525+）开始也引入了该事件，Opera中也包含该方法。到目前为止主流的IE仍然没有要添加的意思。虽然IE下没有，但总是有解决办法 的，下文对比了一下几大主流框架对于该事件的兼容性版本实现方案，涉及的框架包括：
Prototype
jQeury
moontools
dojo
yui
ext
一、Prototype
实现代码

(function() {
/* Support for the DOMContentLoaded event is based on work by Dan Webb,
Matthias Miller, Dean Edwards and John Resig. */
var timer;
function fireContentLoadedEvent() {
if (document.loaded) return;
if (timer) window.clearInterval(timer);
document.fire(“dom:loaded”);
document.loaded = true;
}
if (document.addEventListener) {
if (Prototype.Browser.WebKit) {
timer = window.setInterval(function() {
if (/loaded|complete/.test(document.readyState))
fireContentLoadedEvent();
}, 0);
Event.observe(window, “load”, fireContentLoadedEvent);
} else {
document.addEventListener(“DOMContentLoaded”,
fireContentLoadedEvent, false);
}
} else {
document.write(“<“+”script id=__onDOMContentLoaded defer src=//:></script>”);
$(“__onDOMContentLoaded”).onreadystatechange = function() {
if (this.readyState == “complete”) {
this.onreadystatechange = null;
fireContentLoadedEvent();
}
};
}
})();

实现思路如下：
如果是webkit则轮询document的readyState属性，如果该属性的值为loaded或complete则触发DOMContentLoaded事件，为保险起见，将该事件注册到window.onload上。
如果是FF则直接注册DOMContentLoaded事件。
如果是IE则使用document.write往页面中加入一个script元素，并设置defer属性，最后是把该脚本的加载完成视作DOMContentLoaded事件来触发。
该实现方式的问题主要有两点：第一、通过document.write写script并设置defer的方法在页面包含iframe的情况下，会等到 iframe内的内容加载完后才触发，这与onload没有太大的区别；第二、Webkit在525以上的版本引入了DOMContentLoaded方 法，因此在这些版本中无需再通过轮询来实现，可以优化。
二、jQuery

function bindReady(){
if ( readyBound ) return;
readyBound = true;