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事件被激活,若是網頁文檔中沒有加載外部文件,則它們的響應時間基本上是相同的。html

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

相關文章
相關標籤/搜索