window.onload 和 DOMContentLoaded

相信寫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事件