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


轉自:https://www.cnblogs.com/fengchaoran/p/7493803.html

$(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 ()
{
 
}
復制代碼


免責聲明!

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



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