jQuery中ready與load事件的區別

大家在工作中用jquery的時候一定會在使用之前這樣：

1

2

3

4

5

6

7

8

//document ready

$(document).ready(function())

//document ready 簡寫

$(function())

有些時候也會這麼寫：

1

2

3

4

//document load

$(document).load(function())

乙個是ready乙個是load，這兩個到底有什麼區別呢？今天我們來聊一聊。

大家在面試的過程中，經常會被問到乙個問題：ready與load那乙個先執行，那乙個後執行？答案是ready先執行，load後執行。

要想理解為什麼ready先執行，load後執行就要先聊一下dom文件載入的步驟： 1

2

3

4

5

6

(1) 解析html結構。

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

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

(4) 構造html dom模型。//ready

(5) 載入等外部檔案。

(6) 頁面載入完畢。//load

從上面的描述中大家應該已經理解了吧，ready在第（4）步完成之後就執行了。但是load要在第（6）步完成之後才執行。

ready事件在dom結構繪製完成之後就繪執行。這樣能確保就算有大量的**檔案沒載入出來，js**一樣可以執行。

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

相信大家已經了解了ready與load的區別，其實如果頁面中要是沒有之類的**檔案的話ready與load是差不多的，但是頁面中有檔案就不一樣了，所以還是推薦大家在工作中用ready。

jQuery中ready與load事件的區別

1 2 3 4 5 6 7 8 document ready document ready function document ready 簡寫 function 有些時候也會這麼寫 1 2 3 4 document load document load function 乙個是ready乙個是lo...

jQuery中ready與load事件的區別

目錄 1ready與load誰先執行2dom文件載入的步驟3ready事件4load事件5總結 概述 123 4567 8 document ready document ready function document ready 簡寫 function 有些時候也會這麼寫 12 34 docume...

jQuery中ready與load事件的區別

大家在工作中用jquery的時候一定會在使用之前這樣 1 2 3 4 5 6 7 8 document ready document ready function document ready 簡寫 function 有些時候也會這麼寫 1 2 3 4 document load document ...