window.onload 與 $(document).ready() 的區別

　　以瀏覽器裝載文檔爲例，在頁面加載完畢後，瀏覽器會經過 JavaScript 爲 DOM 元素添加事件。在常規的 JavaScript 代碼中，一般使用 window.onload 方法 ，而在 jQuery 中，使用的是 $(document).ready() 方法。$(document).ready() 方法是事件模塊中最重要的一個函數，能夠極大地提升 Web 應用程序的響應速度。 jQuery 就是用 $(document).ready() 方法來代替傳統 JavaScript 的 window.onload 方法的。經過使用該方法，能夠在 DOM 載入就緒時就對其進行操縱並調用執行它所綁定的函數。在使用過程當中，須要注意 $(document).ready() 方法和 window.onload 方法之間的細微區別。

1. 執行時機

　　$(document).ready() 方法和  window.onload 方法有類似的功能，可是在執行時機方面是有區別的。window.onload 方法是在網頁中全部的元素（包括元素的全部關聯文件）徹底加載到瀏覽器後才執行，即 JavaScript 此時才能夠訪問網頁中的任何元素。而經過 jQuery 中的 $(document).ready() 方法註冊的事件處理程序，在 DOM 徹底就緒時就能夠被調用。此時，網頁的全部元素對 jQuery 而言都是能夠訪問的，可是，這並不意味着這些元素關聯的文件都已經下載完畢。

　　舉一個例子，有一個大型的圖庫網站，爲網頁中全部圖片添加某些行爲，例如單擊圖片後讓它隱藏或顯示。若是使用 window.onload 方法來處理，那麼用戶必須等到每一幅圖片都加載完畢後，才能夠進行操做。若是使用 jQuery 中的 $(document).ready() 方法來進行設置，只要 DOM 就緒就能夠操做了，不須要等待全部圖片下載完畢。很顯然，把網頁解析爲 DOM 樹的速度比把頁面中的全部關聯文件加載完畢的速度快不少。

　　另外，須要注意一點，因爲在 $(document).ready() 方法內註冊的事件，只要 DOM 就緒就會被執行，所以可能此時元素的關聯文件未下載完。例如與圖片有關的 HTML 下載完畢，而且已經解析爲 DOM 樹了，但頗有可能圖片還未加載完畢，因此例如圖片的高度和寬度這樣的屬性此時不必定有效。要解決這個問題，可使用 jQuery 中另外一個關於頁面加載的方法——load() 方法。 load() 方法會在元素的 onload 事件中綁定一個處理函數。若是處理函數綁定給 window 對象，則會在全部內容（包括窗口、框架、對象和圖像等）加載完畢後觸發，若是處理函數綁定在元素上，則會在元素的內容加載完畢後觸發。 jQuery 代碼以下：

$ (window).load(function() {
　　//編寫代碼
})
等價於 JavaScript 中的如下代碼：
window.onload = function() {
　　//編寫代碼
}

 

2. 屢次使用
假設網頁中有兩個函數，JavaScript 代碼以下：

function one(){
　　alert("one");

}
function two(){
　　alert("two");
}

當網頁加載完畢後，經過以下 JavaScript 代碼來分別調用 one 函數和 two 函數:

window.onload = one;
window.onload = two;

然而當運行代碼後，發現只彈出字符串"two"對話框

字符串"one"對話框不能被彈出的緣由是 JavaScript 的 onload 事件一次只能保存對一個函數的引用，它會自動用後面的函數覆蓋前面的函數，所以不能在現有的行爲上添加新的行爲。

爲了達到兩個函數順序觸發的效果，只能再建立一個新的 JavaScript 方法來實現 ，Javascript代碼以下：

window.onload = function() {
　　one;
　　two;
}

雖然這樣編寫代碼能解決某些問題，但仍是不能知足某些需求，例若有多個 JavaScript 文件，每一個文件都須要用到 window.onload 方法，這種狀況下用上面提到的方法編寫代碼會很是麻煩。而 jQuery 的 $(document).ready() 方法可以很好地處理這些狀況，每次調用 $(document).ready() 方法都會在現有的行爲上追加新的行爲，這些行爲函數會根據註冊的順序依次執行。例如以下 jQuery 代碼：

function one(){
    alert("one");
}
function two(){
    alert("one");
}
$(document).ready(function(){
    one()；
});
$(document).ready(function(){
    two()；
});

運行代碼後，會先彈出字符串"one"對話框，而後彈出字符串"two"對話框，依次顯示。

 

3. 簡寫方式

$(document).ready(function(){
    //編寫代碼
});

簡寫方式爲：

$(function(){
    //編寫代碼
})

另外$(document)也能夠簡寫爲$()。當$()不帶參數時，默認參數就是document，所以能夠簡寫爲：

$().ready(function(){
    //編寫代碼
});

三種方式都是同樣的功能，讀者能夠根據本身的喜愛，選擇其中一種。