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大事

版權聲明：本文博主原創文章。博客，未經贊成不得轉載。