jQuery內ready與load事件的區別

jQuery內ready與load事件的區別

     我之所以轉載這篇文章,是因為我前兩天在寫http://hi.baidu.com/see7di/blog/item/c2ba78601de67c5deaf8f8e9.html這個的時候曾經碰到過ready與load的問題.所以轉載過來看一下.

     在前面小節中曾經介紹過jQuery定義的ready事件和JavaScript預設的load事件。下面我們來比較這兩個事件的區別。為了理解這兩個事件的異同，讀者應該先瞭解HTML文檔載入的順序。

DOM文檔載入是按順序執行的，這與瀏覽器的渲染方式有關係。一般瀏覽器渲染操作的順序大致按如下幾個步驟來完成。

(1) 解析HTML結構。

(2) 載入外部指令碼和樣式表檔案。

(3) 解析並執行指令碼代碼。

(4) 構造HTML DOM模型。

(5) 載入圖片等外部檔案。

(6) 頁面載入完畢。

具體說明如下。

1. 執行時機

load事件必須等到網頁中所有內容全部載入完畢之後才被執行。如果一個頁面中包含了大容量的多媒體檔案，則就會出現這種情況：網頁文檔已經呈現出來，但由於網頁資料還沒有完全載入完畢，導致load事件不能夠即時被觸發。

開發人員習慣把頁面初始化設定的指令碼都放在load事件處理函數中，由於頁面資料沒有完全載入進來，導致網頁文檔呈現和指令碼初始化配置不能夠保持同步，從而影響了頁面的可用性。

而jQuery的ready事件是在DOM結構繪製完畢之後就執行，也就是說它在外部檔案載入之前就被執行了，這樣就能夠確保網頁文檔的呈現和指令碼初始化設定保持同步。

總之，ready事件先於load事件被啟用，如果網頁文檔中沒有載入外部檔案，則它們的回應時間基本上是相同的。

[出處：http://book.51cto.com/art/201012/236487.htm]