window.onload与$(document).ready()的区别
生活随笔
收集整理的這篇文章主要介紹了
window.onload与$(document).ready()的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ?以瀏覽器裝載文檔為例,在頁面加載完畢后,瀏覽器會通過Javascript為DOM元素添加事件。在常規的Javascript代碼中,通常使用window.onload方法,而在Jquery中,使用的是$(document).ready()方法。$(document).ready()方法是事件模塊中最重要一個函數,可以極大的提高Web應用程序的速度。
另外,需要注意一點,由于在$(document).ready()方法內注冊的事件,只要DOM就緒就會被執行,因此可能此時元素的關聯文件未下載完。例如與圖片有關的html下載完畢,并且已經解析為DOM樹了,但很有可能圖片還沒有加載完畢,所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題,可以使用Jquery中另一個關于頁面加載的方法---load()方法。Load()方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定給window對象,則會在所有內容(包括窗口、框架、對象和圖像等)加載完畢后觸發,如果處理函數綁定在元素上,則會在元素的內容加載完畢后觸發。Jquery代碼如下: $(window).load(function(){?
? ? ? ?// 編寫代碼?
}); 等價于JavaScript中的以下代碼 Window.onload = function(){
???? // 編寫代碼
}
| ? | window.load | $(document).ready() |
| 執行時機 | 必須等待網頁中所有的內容加載完畢后(包括圖片)才能執行 | 網頁中所有DOM結構繪制完畢后就執行,可以能DOM元素關聯的內容并沒有加載完 |
| 編寫個數 | 不能同時編寫多個 以下代碼無法正確執行: window.onload = function(){ ?? alert(“text1”); }; window.onload = function(){ ?? alert(“text2”); }; 結果只輸出第二個 | 能同時編寫多個 以下代碼正確執行: $(document).ready(function(){ ?? alert(“Hello World”); }); $(document).ready(function(){ ?? alert(“Hello again”); }); 結果兩次都輸出 |
| 簡化寫法 | 無 | $(function(){ ?? // do something }); |
? ? ? ?// 編寫代碼?
}); 等價于JavaScript中的以下代碼 Window.onload = function(){
???? // 編寫代碼
}
轉載于:https://blog.51cto.com/webview/318902
總結
以上是生活随笔為你收集整理的window.onload与$(document).ready()的区别的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【Unity】屏幕空间位置变换到世界空间
- 下一篇: [健康]女人喝红酒的好处