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

DOMContentLoaded和onload事件区别和兼容

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

onload事件和js的defer设置

onload事件在html文档中所有的节点都下载完成后执行,包括js,css,图片的资源完全下载后才执行。如果js 设置了defer之后,js的解析执行在浏览器生成了html文档后执行,不包括图片的资...
  • kkdelta
  • kkdelta
  • 2014年12月26日 16:56
  • 2488

常用的window.onload等 也有执行顺序影响

在最近的项目中,我根据网页的需求,而因为我用了vue.js框架,所以用到这样的结构,不仅直接在javascript中直接编写了js代码,还通过import引入了其他的js文件,这些js文件一部分是通过...
  • fionafung58
  • fionafung58
  • 2016年05月17日 17:55
  • 2445

页面加载的顺序和window.onload的作用

在说我们的主题之前,我们首先来看几段代码:   例子一、首先我们把script代码块放在head标签内,运行之后发现,点击按钮没有反应。 test1 ...
  • xixiruyiruyi
  • xixiruyiruyi
  • 2016年12月08日 17:31
  • 1538

关于window.onload加载的多种解决方案

转自:http://blog.moocss.com/tutorials/javascript-tutorials/526.html  (Blog也不错,可以看看) By Rainbow on...
  • chelen_jak
  • chelen_jak
  • 2015年11月05日 10:31
  • 3375

解决一个页面多个window.onload问题

两个window.onload测试 alert("开始"); window.onload = function() { alert("第一个"); }; window...
  • xiaoxiangyu5
  • xiaoxiangyu5
  • 2015年07月13日 12:59
  • 1133

window.onload使用时遇到的问题_1

一个简单的创建节点插入节点的代码。 若把window.onload函数这样写,运行会出现错误。 错误代码:window.onload=function() { var para=docu...
  • qq_36748278
  • qq_36748278
  • 2016年11月22日 17:38
  • 791

js中在window.onload中调用function函数遇到的疑惑

今天在jsp中的form表单利用onclick=”xxx”来监听js中一个function xxx(){}函数,遇到一个很奇怪的问题就是点击submit按钮之后竟然没有响应xxx()函数。在这之前我已...
  • c_p_h
  • c_p_h
  • 2017年03月19日 14:33
  • 4427

一个页面中需要多个window.onload = function(){}冲突问题解决

今天在写js作业的时候,没注意用到了几个 window.onload,发现打开测试的时候有冲突,导致没有效果出现。上网查阅了资料,发现解决办法。 如果在一个页面中有两个JavaScript 分别都用到...
  • u012036171
  • u012036171
  • 2015年03月07日 22:20
  • 391

js中的window.onload和jquery中的load区别的讲解

JavaScript 中的以下代码  [javascript] view plaincopyprint? Window.onload = function (){   ...
  • toto1297488504
  • toto1297488504
  • 2014年01月02日 18:56
  • 1345
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:window.onload 和 DOMContentLoaded
举报原因:
原因补充:

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