相信写js的，都知道window.onload吧，但是并不是每个人都知道DOMContentLoaded，其实即使你不知道，很有可能你也经常使用了这个东西。
一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。
我们可以写代码来简单测试一下这两种事件：
javascript代码（引入了jQuery1.4.1)：
|
|
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和window.onload,布布扣,bubuko.com