Window.onLoad 和 DOMContentLoaded事件的先后顺序

        相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西。

      一般情况下,DOMContentLoaded事件要在window.onload之前执行,当DOM树构建完成的时候就会执行DOMContentLoaded事件,而window.onload是在页面载入完成的时候,才执行,这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后,绑定事件到元素,我们并不需要图片元素,加上有时候加载外域图片的速度非常缓慢。

     我们可以写代码来简单测试一下这两种事件:

if(document.addEventListener){
	function DOMContentLoaded(){
		$("#status").text("DOM is ready now!");
	}
	document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}
window.οnlοad=function(){
			$("#status").text("DOM is ready AND wondow.onload is excute!");

在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事件

延伸阅读:

合理使用DOMContentLoaded可以使页面更早的响应用户操作,希望IE早日原生实现这个事件,或者希望IE灭亡

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值