DOMContentLoaded和window.onload

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

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

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/116789.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...