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) 加載圖片/css/音頻等外部文件。
(6) 頁面加載完畢。//load

從上面的描述中你們應該已經理解了吧，ready在第（4）步完成以後就執行了。可是load要在第（6）步完成以後才執行。

ready事件：

1. ready事件在DOM結構繪製完成以後就繪執行。這樣能確保就算有大量的媒體文件沒加載出來，JS代碼同樣能夠執行。

2. ready事件能夠被多處綁定，全部的處理函數均可以被執行。

load事件：

1. load事件必須等到網頁中全部內容所有加載完畢以後才被執行。若是一個網頁中有大量的圖片的話，則就會出現這種狀況：網頁文檔已經呈現出來，但因爲網頁數據尚未徹底加載完畢，致使load事件不可以即時被觸發。

2. load事件只能執行一次處理函數，即便被多處綁定。

總結：

相信你們已經瞭解了ready與load的區別，其實若是頁面中要是沒有圖片之類的媒體文件的話ready與load是差很少的，可是頁面中有文件就不同了，因此仍是推薦你們在工做中用ready。

 

---

Chrome不能獲取圖片高度的問題

你們遇沒遇到過在chrome中，在用jQuery的ready事件的時候想要獲取頁面中圖片的高度是獲取不到的？

$(document).ready(function(){
　　$("#img").height();//在chrome中獲取到爲0;
})

解決方法：

其實解決方法也很簡單，把ready事件換爲load事件就能夠了。

$(window).load(function(){
　　$("#img").height();//在chrome中能夠獲取到
})