$(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 ()
{
 
}