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

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

1.執行時間 

window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行 ；

$(document).ready()是DOM結構繪製完畢後就執行，不必等到加載完畢。 

 

2.編寫個數不同

window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個;

 以下代碼無法正確執行：
window.onload = function(){
   alert(“text1”);
};
window.onload = function(){
   alert(“text2”);
};
結果只輸出第二個 

$(document).ready()可以同時編寫多個，並且都可以得到執行。

 $(document).ready(function(){
   alert(“Hello World”);
});
$(document).ready(function(){
   alert(“Hello again”);
});
結果兩次都輸出  

3.簡化寫法

window.onload沒有簡化寫法；
$(document).ready(function(){})可以簡寫成$(function(){})。

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

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