IE9开始和其他现代浏览器可以通过绑定DOMContentLoaded事件;
IE9之前的的浏览器需要绑定onreadystatechange事件并等待readyState为"complete"来判断;
此外IE9之前的浏览器还可以通过不停地执行document.documentElement.doScroll("left")直到不抛出异常来判断。
IE还可以通过<script>脚本设置属性defer="defer",并判断该脚本的onreadystatechange事件来触发DOM-Ready。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
</style>
<script type="text/javascript">
setTimeout(function(){ // 事件队列.
var readyFns;
// 标记状态.fireReady触发时设置为true.
var isReady=false; // 添加监听事件或马上执行.
window.ready=function(fn){
initReady();
if(isReady){
fn();
}
else{
readyFns.push(fn);
}
};
// 触发DOM-Ready事件.
function fireReady(){
// 只执行一次.
if(isReady){
return;
}
isReady=true;
// 遍历执行.
if(readyFns){
for(var i=0,fn;fn=readyFns[i++];){
fn();
}
// 清空事件.
readyFns.length=0;
}
}
// IE678下判断DOM是否加载完毕.
function doscrollcheck(){
try{
document.documentElement.doScroll("left");
document.title+="doscroll";
fireReady();
}
catch(e){
setTimeout(doscrollcheck,1);
}
}
// 初始化监听.
function initReady(){
if(readyFns){
return;
}
readyFns=[];
// 添加事件绑定.
if(document.addEventListener){
document.title+="W3C";
document.addEventListener("DOMContentLoaded",function(){
document.removeEventListener("DOMContentLoaded",arguments.callee,false);
fireReady();
},false);
}
else if(document.attachEvent){
document.title+="IE678";
document.attachEvent("onreadystatechange",function(){
if(document.readyState==="complete"){
document.detachEvent("onreadystatechange",arguments.callee);
fireReady();
}
});
document.attachEvent("onload",function(){
document.title="onload";
fireReady()
});
// 顶层窗口还可以检测doScrollCheck方法来检测是否可以触发ready事件
if(document.documentElement.doScroll){
// 是否为顶层窗口.
if(self===self.top){
doscrollcheck();
}
}
}
}
// 如果是动态加载上面的脚本.则应该判断是否完成.
(function(){
if(document.readyState==="complete"){
document.body.innerHTML+="document.readyState loaded";
fireReady();
}
})(); // 测试.
ready(function(){
document.body.innerHTML+="1";
});
ready(function(){
document.body.innerHTML+="2";
});
ready(function(){
document.body.innerHTML+="3";
});
},0);// 调整延迟来模拟"动态加载该DOM-Ready的情况" setTimeout(function(){
ready(function(){
document.body.innerHTML+="4";
});
},1000);
window.onload=function(){
document.body.innerHTML+="loaded";
}; </script>
</head>
<body><img src="http://1.su.bdimg.com/skin_zoom/38.jpg" style="width:10px;height:10px;" /></body>
</html>
参考司徒正美的一篇博客:javascript的domReady