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

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

$(document).ready和window.onload都是在都是在頁面載入完執行的函式，大多數情況下差別不大，但也是有區別的。

$(document).ready:是DOM結構繪製完畢後就執行，不必等到載入完畢。 意思就是DOM樹載入完畢，就執行，不必等到頁面中圖片或其他外部檔案都載入完畢。並且可以寫多個.ready。

window.onload:是頁面所有元素都載入完畢，包括圖片等所有元素。只能執行一次。

所以，$(document).ready的執行時間要早於window.onload。並且可以寫多個，看程式碼:

 1 //以下程式碼無法正確執行： 
 2 window.onload = function()
 3 { 
 4 alert(“text1”); 
 5 }; 
 6 window.onload = function()
 7 { 
 8 alert(“text2”); 
 9 }; 
10 //結果只輸出第二個 能同時編寫多個 
11 //以下程式碼正確執行： 
12 $(document).ready(function()
13 { 
14 alert(“Hello World”); 
15 }); 
16 $(document).ready(function()
17 { 
18 alert(“Hello again”); 
19 }); 
20 //結果兩次都輸出 

如果需要獲取DOM繫結元素的屬性值時，最好使用window.onload,因為他是在所有元素載入完畢才執行，如果使用$(document).ready，DOM已經載入，但是DOM繫結的元素屬性沒有載入，所以屬性不生效。要解決這個問題，可以使用 Jquery 中另一個關於頁面載入的方法 ---load() 方法。 Load() 方法會在元素的 onload 事件中繫結一個處理函式。如果處理函式繫結給 window 物件，則會在所有內容 ( 包括視窗、框架、物件和影像等 ) 載入完畢後觸發，如果處理函式繫結在元素上，則會在元素的內容載入完畢後觸發。

//Jquery 程式碼如下： 
$(window).load(function ()
{ 

});
//等價於 JavaScript 中的以下程式碼 
Window.onload = function ()
{
 
}