DOMContentLoaded Tag存档

随着ajax的流行，页面中的JS代码越来越多。一般我们用JS处理页面时，都是使用window.onload等到页面加载完毕后再来处理，否则有时会出现文档未加载完毕而报的错误了。

但window.onload有一个不好的地方，它会等到整个页面（包括图片，flash等）全部加载完毕后，才会执行。一个页面中如果有很多图片，中间会有较长的延迟才会去执行我们的代码。

具体效果：http://www.ajaxeye.com/labs/domready.htm（注意页面中的两个小方块颜色，一开始默认都是红色，注意颜色的改变）

上面页面中，会在DOM树加载完毕后和window.onload时分别改变两个小方块的颜色为绿色。

解决方法就是想办法监听DOM树加载完毕的事件，等DOM树载完毕后执行我们的代码

偶这个是从mootools，prototype中抠出来的IE，Firefox下测试通过

Event.addDOMReadyEvent = function($callback) {
var timer, fired = false;
function fireDOMReadyEvent() {
if (fired) {
return;
}
if (timer) {
window.clearInterval(timer);
}
fired = true;
$callback();
}
// firefox, opera, safari ...
if (document.addEventListener) {
if (window.webkit) {
timer = window.setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
fireDOMReadyEvent();
}
}, 10);
Event.addEvent(window, 'load', fireDOMReadyEvent);
} else {
// firefox, opera9 使用 DOMContentLoaded
document.addEventListener("DOMContentLoaded", fireDOMReadyEvent, false);
}
} else {
// Internet Explorer中使用 defer 属性
var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';
document.write('<SCRIPT id=__tbOnDOMReady src="' + src + '" defer><\/script>');
$('__tbOnDOMReady').onreadystatechange = function() {
if (this.readyState == 'complete') {
this.onreadystatechange = null;
fireDOMReadyEvent();
}
};
}
}