关闭

window.onload 和 DOMContentLoaded

298人阅读 评论(0) 收藏 举报

相信写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事件

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:920154次
    • 积分:10787
    • 等级:
    • 排名:第1547名
    • 原创:92篇
    • 转载:1171篇
    • 译文:11篇
    • 评论:28条
    最新评论