DOMReady实现策略
* 在页面的DOM树创建完成后（即HTML解析第一步完成）就触发，而无需等待其他资源的加载，即DOMReady实现策略
* 支持DOMContentLoaded事件的浏览器: 就使用DOMContentLoaded事件
* 不支持DOMContentLoaded事件的浏览器: 使用Hack兼容
* 通过IE中的document.documentElement.doScroll(‘left‘)来判断DOM树是否创建完毕
代码实现
function myReady(fn){
if(document.addEventListener){
document.addEventListener(‘DOMContentLoaded‘,fn,false);
}else{//低版本浏览器
IEContentLoaded(fn);
}
//IE模拟DOMContentLoaded
function IEContentLoaded(fn){
var d = window.document;
var done = false;
//值执行一次用户的回调函数init();
var init = function(){
if(!done){
done = true;
fn();
}
};
(function(){
try{
//DOM树未创建完之前调用doScroll会抛出错误
d.documentElement.doScroll(‘left‘);
}catch(e){
//延迟在试一次，
//var func = function() { alert(func === arguments.callee);}func();
//执行上述代码，可以看到alter出来的结果是true，注意，此处用的是“===”，就是说func与arguments.callee对象类型和值都相等。
setTimeout(arguments.callee,50);
return;
}
init();
})();
//监听document的加载状态
d.onreadystatechange = function(){
//如果用户是在domReady之后绑定的函数，就立马执行
if(d.readyState == ‘complete‘){
d.onreadystatechange = null;
init();
}
}
}
}
为什么使用domReady来代替onload？
* onload是需要等待页面所有资源都加载完毕，才触发
* domReady是DOM加载完就触发
我们下面看个例子
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>domReady</title>
<script src="domReady.js"></script>
</head>
<body>
<div id="showMsg"></div>
<div>
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
</div>
<script>
var d = document;
var msgBox = d.getElementById(‘showMsg‘);
var imgs = d.getElementsByTagName(‘img‘);
var time1 = null,time2 = null;
myReady(function(){
msgBox.innerHTML += "dom已加载！<br>";
time1 = new Date().getTime();
msgBox.innerHTML += "时间戳:" + time1 + "<br>";
});
window.onload = function(){
msgBox.innerHTML += "onload已加载！<br>";
time2 = new Date().getTime();
msgBox.innerHTML += "时间戳:" + time2 + "<br>";
msgBox.innerHTML += "domReady比onload快" + (time2 - time1) + "ms<br>";
};
</script>
</body>
</html>
时间： 2024-12-24 21:47:35