jQuery中ready與load事件的區別總結

你們在工做中用jQuery的時候必定會在使用以前這樣：

//document ready
$(document).ready(function(){
    ...code...
})

//document ready 簡寫
$(function(){
    ...code...
})

有些時候也會這麼寫：

//document load
$(document).load(function(){
    ...code...
})

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

ready與load誰先執行：

你們在面試的過程當中，常常會被問到一個問題：ready與load那一個先執行，那一個後執行？答案是ready先執行，load後執行。

DOM文檔加載的步驟：

要想理解爲何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的區別，其實若是頁面中要是沒有圖片之類的媒體文件的話ready與load是差很少的，可是頁面中有文件就不同了，因此仍是推薦你們在工做中用ready。