相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西。
一般情况下,DOMContentLoaded事件要在window.onload之前执行,当DOM树构建完成的时候就会执行DOMContentLoaded事件,而window.onload是在页面载入完成的时候,才执行,这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后,绑定事件到元素,我们并不需要图片元素,加上有时候加载外域图片的速度非常缓慢。
我们可以写代码来简单测试一下这两种事件:
javascript代码(引入了jQuery1.4.1):
if
(document.addEventListener){
function
DOMContentLoaded(){
$(
"#status"
).text(
"DOM is ready now!"
);
}
document.addEventListener(
"DOMContentLoaded"
, DOMContentLoaded,
false
);
}
window.onload=
function
(){
$(
"#status"
).text(
"DOM is ready AND wondow.onload is excute!"
);
}
|
HTML 代码 body 部分:
<
h1
> DOM READY's TEST </
h1
>
<
img
src="./delay.php" alt="delay image" />
<
p
id="status"> DOM is not ready </
p
>
|
为了清楚的看到效果,特意写个简单的php文件,提供图片延时加载,代码如下:
sleep(5);
header(
'Location:./delay.png'
);
|
在firefox和chrome以及opera中都可以清楚的看到,在图片未载入之前,id为status的段落已经显示了“DOM is ready now!”,然后等5秒钟后,图片加载完成后,此段落显示”DOM is ready AND wondow.onload is excute!”
此代码并不能在IE中工作,一方面是因为我使用的是addEventListener,开始前做了个判断,不存在此方法则不添加此事件。这样做的原因是IE确实是不支持DOMContentLoaded这个事件的,为了代码的简单,就没为IE写了。虽然IE没有此事件,但是我们却可以来模拟这个事件,常见的方法是判断element的doScroll如果成功则说明DOM载入完成。
常见的库中都提供了此事件的兼容各个浏览器的封装,如果你是个jQuery使用者,你可能会经常使用$(document).ready();或者$(function(){}) 这都是使用了DOMContentLoaded事件