JS 頁面載入觸發事件 document.ready和onload的區別

標籤：htm   位元組   alt   時間   表示   方案   span   nbsp   執行   

document.ready和onload的區別——JavaScript文檔載入完成事件
頁面載入完成有兩種事件：

一是ready，表示文檔結構已經載入完成（不包含圖片等非文字媒體檔案）；

二是onload，指示頁麵包含圖片等檔案在內的所有元素都載入完成。

 

1、Dom Ready

用jQ的人很多人都是這麼開始寫指令碼的： 
$(function(){ 
      // do something 
});

例如：

$(function() {
     $("a").click(function() {
           alert("Hello world!");
      });

})

這個例子就是給所有的a標籤     綁定了一個click事件。即當所有連結被按一下滑鼠的時候，都執行 alert("Hello World!");
(自己的理解)也就是說頁面載入時綁定，真正該觸發時觸發。
其實這個就是jq ready()的簡寫，他等價於： 
$(document).ready(function(){
     //do something
})
或者下面這個方法，jQuer的預設參數是：“document”；
$().ready(function(){
    //do something
})
這個就是jq ready()的方法就是Dom Ready，他的作用或者意義就是:在DOM載入完成後就可以可以對DOM進行操作。
一般情況一個頁面響應載入的順序是，網域名稱解析-載入html-載入js和css-載入圖片等其他資訊。
那麼Dom Ready應該在“載入js和css”和“載入圖片等其他資訊”之間，就可以操作Dom了。

 

2、Dom Load
用原生的js的時候我們通常用onload時間來做一些事情，比如： 
window.onload=function(){
      //do something
}
或者經常用到的圖片，假設這個
document.getElementById("imgID").onload=function(){
     //do something
}
這種就是Dom Load，他的作用或者意義就是:在document文檔載入完成後就可以可以對DOM進行操作，document文檔包括了載入圖片等其他資訊。
那麼Dom Load就是在頁面響應載入的順序中的“載入圖片等其他資訊”之後，就可以操作Dom了。

 

3.用個最常用的例子說明Dom Ready和Dom Load兩者的區別
Dom Ready是在dom載入完成後就可以直接對dom進行操作，比如一張圖片只要<img>標籤完成，不用等這個圖片載入完成，就可以設定圖片的寬高的屬性或樣式等；
Dom Load是在整個document文檔（包括了載入圖片等其他資訊）載入完成後就可以直接對dom進行操作，比如一張圖片要等這個表徵圖載入完成之後才能設定圖片的寬高的屬性或樣式等；
比如一個圖片瀏覽的效果，通常如果圖片尺寸很大的情況下，為了防止圖片把頁面撐開通常會限定圖片的寬度或高度，如果是單張圖片或者是多張規格比例統一的圖片下我們可以直接在<img>上加個寬度或者高度的屬性<img src=“img.jpg” alt=”碼頭的大照片” width=“100” height=“90”>，或者可以在css樣式中加寬度或者高度的屬性（推薦）。但是如果這些張規格比例不統一的圖片要瀏覽呢？那就有問題，你設定寬高很可能造成圖片嚴重失真。在ie6之後ie7，ie8還有其他主流瀏覽器支援css2.1中min-width，max-width，min-height，max-width，這樣我們就可以用min-width，max-width，min-height，max-width解決這些問題，但是ie6除非是拋棄效能問題用css運算式（當然old9(http://old9.blogsome.com/2008/10/26/css-expression-reloaded/)和懌飛(http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/)有關於css運算式效能問題的解決方案,大家可以看一下）。這個時候ie的最好解決方案就是用Dom Ready而不是Dom Load，因為通常大圖片載入的時候會一點一點的載入，這個在尺寸大，位元組多，網速慢的時候表現的非常明顯，用Dom Load，通常是先把頁面撐開，載入完成後再把圖片重設寬高，圖片載入多少時間，這個頁面就會撐開多久，使用者會非常難受！！

JS 頁面載入觸發事件 document.ready和onload的區別