jQuery中ready和load的區別
阿新 • • 發佈:2018-12-20
- ready方法
$(document).ready(function(){ ...code... }) //document ready 簡寫 $(function(){ ...code... })
- load方法
$(window).load(function(){ ...code... })
- ready和load中ready先執行,load後執行
- DOM文件載入步驟:
1)解析HTML結構;
2)載入外部指令碼和樣式檔案;
3)解析並執行指令碼程式碼;
4)構造HTML DOM模型 ;//ready
5)載入圖片等外部檔案;
6)頁面載入完畢。//load
從以上描述可以看出,ready在第(4)步完成之後就執行,而load在第(6)步完成之後才執行
- ready事件:
ready事件在DOM結構繪製完成之後就會執行,這樣能確保就算有大量的媒體檔案沒有加載出來,JS程式碼一樣可以執行
- load事件:
load事件必須等到網頁中所有內容全部載入完畢之後才被執行。如果一頁網頁有大量圖片的話,則就出現網頁文件已經呈現 出來但網頁資料(指令碼初始化)還沒載入完畢,導致load事件不能夠即時被觸發.
總結:
ready事件先於load事件被啟用,如果網頁文件中沒有載入外部檔案,則它們的響應時間基本上是相同的.