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.οnlοad=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事件

转载于:https://www.cnblogs.com/double405/p/5125059.html