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 (){ 
// 編寫代碼 
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM