jQuery中ready與load事件的區別

一、摘要

你們在編程中使用jQuery還有JS的時候必定會在使用以前這樣：

//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。