jQuery中ready與load事件的區別

2021-08-18 10:17:39 字數 1386 閱讀 1800

大家在工作中用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 ...