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

相信写js的，都知道window.onload吧，可是并非每一个人都知道DOMContentLoaded，其实即便你不知道，颇有可能你也常常使用了这个东西。

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

     咱们能够写代码来简单测试一下这两种事件：

1 if(document.addEventListener){
2     function DOMContentLoaded(){
3         $("#status").text("DOM is ready now!");
4     }
5     document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
6 }
7 window.onload=function(){
8             $("#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事件