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