Jquery中$(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() {
function two() { |
當網頁加載完畢後,通過Javascript代碼來分別調用one函數和two函數:
代碼如下 | 複製代碼 |
window.onload = one; |
然而當運行代碼後,發現只彈出字符串“two”對話框。
字符串“one”對話框不能被彈出的原因是JavaScript的onload事件一次只能保存在一個函數的引用,它會自動用後面的函數覆蓋前面的函數,因此不能在現有的行爲上添加新的行爲。
爲了達到兩個函數順序觸發的效果,只能在創建一個新的JavaScript方法來實現,JavaScript代碼如下:
代碼如下 | 複製代碼 |
window.onload = function () { |
雖然這樣編寫的代碼能解決某些問題,但還是不能滿足某些需求,例如有多個JavaScript文件,每個文件都需要用到window.onload方法,這種情況下用上面提到的方法編寫代碼會非常麻煩。你可以參考Javascript共享onload事件,而jQuery的$(document).ready()方法能夠很好地處理這些情況,每次調用$(document).ready()方法都會在現有的行爲上追加新的行爲,這些行爲函數會根據註冊的順序依次執行。例如如下jQuery代碼:
代碼如下 | 複製代碼 |
function one() { |
運行代碼後,會彈出字符串“one”對話框,然後彈出字符串“two”對話框
注:文章轉自http://www.php100.com/html/program/jquery/2013/0905/5954.html