Jquery中$(document).ready()和window.onload的區別

Jquery中$(document).ready()和window.onload的區別

| 時間：2013-09-05 20:25:09 | 閱讀數：34306

[導讀] $(document) ready()和window onload在表單上看都是頁面加載時咱們就去執行一個函數或動做，可是在具體的細節上$(document) ready()和window onload仍是有區別的，下面我來介紹介紹。最基本的區別1 執行時間win

$(document).ready()和window.onload在表單上看都是頁面加載時咱們就去執行一個函數或動做，可是在具體的細節上$(document).ready()和window.onload仍是有區別的，下面我來介紹介紹。

最基本的區別

1.執行時間

window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

2.編寫個數不一樣

window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個
$(document).ready()能夠同時編寫多個，而且均可以獲得執行

3.簡化寫法

window.onload沒有簡化寫法
$(document).ready(function(){})能夠簡寫成$(function(){});

以瀏覽器裝載文檔爲例，在頁面加載完畢後，瀏覽器會經過JavaScript爲DOM元素添加事件。在常規的JavaScript代碼中，一般使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。

$(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 () {     //編寫代碼 }

假設網頁中有兩個函數，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方法，這種狀況下用上面提到的方法編寫代碼會很是麻煩。你能夠參考Javascript共享onload事件，而jQuery的$(document).ready()方法可以很好地處理這些狀況，每次調用$(document).ready()方法都會在現有的行爲上追加新的行爲，這些行爲函數會根據註冊的順序依次執行。例如以下jQuery代碼：

代碼以下	複製代碼
function one() {     alert("one"); } function two() {     alert("two"); } $(document).ready(function () {     one(); }); $(document).ready(function () {     two(); })

運行代碼後，會彈出字符串「one」對話框，而後彈出字符串「two」對話框