window.load 和$(document).ready() 區別

 

1.執行時間 
window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。 
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。
2.編寫個數不一樣 
window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個 
$(document).ready()能夠同時編寫多個，而且均可以獲得執行 
如下代碼沒法正確執行： 
window.onload = function(){ 
alert(「text1」); 
}; 
window.onload = function(){ 
alert(「text2」); 
}; 
結果只輸出第二個 能同時編寫多個 
如下代碼正確執行： 
$(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 (){ 
// 編寫代碼 
}