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

Jquery中$(document).ready()的做用相似於傳統JavaScript中的window.onload方法，不過與window.onload方法仍是有區別的。

jquery中$(document).ready()的做用相似於傳統JavaScript中的window.onload方法，不過與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() 方法是事件模塊中最重要一個函數，能夠極大的提升 Web 應用程序的速度。

window.load $(document).ready() 
執行時機 必須等待網頁中全部的內容加載完畢後 ( 包括圖片 ) 才能執行 網頁中全部 DOM 結構繪製完畢後就執行，能夠能 DOM 元素關聯的內容並無加載完 
編寫個數 不能同時編寫多個 
如下代碼沒法正確執行： 
window.onload = function(){ 
alert(「text1」); 
}; 
window.onload = function(){ 
alert(「text2」); 
}; 
結果只輸出第二個 能同時編寫多個 
如下代碼正確執行： 
$(document).ready(function(){ 
alert(「Hello World」); 
}); 
$(document).ready(function(){ 
alert(「Hello again」); 
}); 
結果兩次都輸出 
簡化寫法 無 $(function(){ 
// do something 
});

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

——————————————————————————————

最近在改一個嵌入在frame中的頁面的時候，使用了jquery作效果，而頁面自己也綁定了onload事件。改完後，Firefox下測試正常流暢，IE下就要等個十幾秒jquery的效果纔出現，黃花菜都涼了。

　　起初覺得是和自己onload加載的方法衝突。網上廣泛的說法是$(document).ready()是在頁面DOM解析完成後執行，而onload事件是在全部資源都準備完成以後才執行，也就是說$(document).ready()是要在onload以前執行的，尤爲當頁面圖片較大較多的時候，這個時間差可能更大。但是我這頁面分明是圖片都顯示出來十幾秒了，還不見jquery的效果出來。

　　刪了onload加載的方法試試，結果仍是同樣，看來沒有必要把本來的onload事件綁定也改用$(document).ready()來寫。那是什麼緣由使得Firefox正常而IE就能呢？接着調試，發現IE下原來綁定的onload方法居然先於$(document).ready()的內容執行，而Firefox則是先執行$(document).ready()的內容，再執行原來的onload方法。這個和網上的說法彷佛不徹底一致啊，呵呵，有點意思，好像愈來愈接近真相了。

　　翻翻jquery的源碼看看$(document).ready()是如何實現的吧：

複製代碼 代碼以下:
if ( jQuery.browser.msie && window == top ) (function(){ 
if (jQuery.isReady) return; 
try { 
document.documentElement.doScroll("left"); 
} catch( error ) { 
　　　　　　setTimeout( arguments.callee, 0 ); 
　　　　　　 return; 
　　　　} 
　　 // and execute any waiting functions 
　　　jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready );

結果很明瞭了，IE只有在頁面不是嵌入frame中的狀況下才和Firefox等同樣，先執行$(document).ready()的內容，再執行原來的onload方法。對於嵌入frame中的頁面，也只是綁定在load事件上執行，因此天然是在原來的onload綁定的方法執行以後才輪到。而這個頁面中正好在測試環境下有一個訪問不到的資源，那十幾秒的延遲正是它放大出的時間差。