window.onload 和 DOMContentLoaded

转载 2012年03月27日 16:04:29

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

相关文章推荐

关于HTML页面DOMContentLoaded和Window.onload区别

这两个事件都是在js原生开发时经常会用到的,比如需要对页面dom进行动态处理,这时就需要用到DOMContentLoaded和window.onload事件,大家都知道,就是在dom构建完毕后,才可以...

DOMContentLoaded和onload事件区别和兼容

DOMContentLoaded事件和onload事件区别和兼容
  • ws9029
  • ws9029
  • 2017年07月04日 17:35
  • 166

window.onload

  • 2015年07月09日 16:31
  • 655B
  • 下载

Web_JavaScript_页面多个window.onload需求问题解决;

特别说明:当页面出现多个window.onload时,就会出现意想不到的事情,比如后面的...

【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload

有时候,在JavaScript中,即使设置了ID也有可能出现document.getElementById()获取不到的情况,然后你就开始想document是否写错之类的,其实根本就不是你的代码的大小...

关于JS的window.onload与$(function (){})方法区别,JS放在head和Body的区别

在调试页面的时候发现总找不到对象,总是报“undefined”。最后发现原来是JS位置的问题。 注意点一: 使用highcharts时jquery.min.js 文件必须放在highcharts....

$(document).ready(function() 总结以及和window.onload的区别

转载:http://www.cnblogs.com/MikeChen/articles/1795526.html 页面加载完成后开始运行do stuff when DOM is ready 中的语句...
  • wdt3385
  • wdt3385
  • 2012年12月04日 09:41
  • 845

jquery $(document).ready() 与window.onload的区别

Document对象和Window对象的关系 1 Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTM...

document.ready和window.onload的区别

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。   ready事件在DOM结构绘制完...

js window.onload 加载多个函数和追加函数

平时做项目 经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");return;...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:window.onload 和 DOMContentLoaded
举报原因:
原因补充:

(最多只允许输入30个字)