jQuery中ready與load事件的區別

2022-06-04 01:42:07 字數 1058 閱讀 6378

1、摘要

//document ready

$(document).ready(function())

//document ready 簡寫

$(function())

有時候也這樣:

//document load

$(document).load(function())

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

2、ready和load誰先執行:

3、dom文件載入步驟:

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

(1) 解析html結構。

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

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

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

(5) 載入等外部檔案。

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

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

4、關於ready事件:

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

5、關於load事件

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

6、總結:

相信大家已經了解了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 ...