DOMContentLoaded和window.onload

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

版权声明：本文博主原创文章。博客，未经赞成不得转载。