$(document).ready和window.onload 簡單分析區別
《鋒利的JQuery》翻開沒看幾頁,就遇到了這個神奇的問題,之前在橙旭園學習的時候,JQuery只教了一些基礎的,像鏈式操作等,那時以為這個和window.onload()差不多一模一樣,現在才發現差的蠻多的,來整理下:
0:$(document).ready 等價於 $().ready()。
1:$(document).ready可以有多個,而window.onload()只有一個,後面的會覆蓋前面的。
<script>
$(document).ready(
console.log("$1")
);
$(document).ready(
console.log( "$2")
)
window.onload = function(){
console.log("win1");
}
window.onload = function(){
console.log("win2");
}
</script>
實現結果:
2:$(document).ready:是DOM結構繪制完畢後就執行,不必等到加載完畢。 意思就是DOM樹加載完畢,就執行,不必等到頁面中圖片或其他外部文件都加載完畢。例如有一張圖片,DOM結構已經為它預留好位置了,但還在加載,這個時候就能夠給它綁定方法了
window.onload:是頁面所有元素都加載完畢,包括圖片啊表格等所有元素,如果頁面太大,或者用戶帶寬過小,就可能會出現無響應情況
這一點就使得$(document).ready比window.onload運行得更早一些
舉例:
<script> var btn = document.getElementById("btn"); window.onload = function(){ var pic = document.querySelector("img"); console.log(pic.alt); } $(document).ready(
可以看到,在$(document).ready中pic的alt屬性還未定義
(前面一個才是$(document).ready,從這裏也可以再次發現它比window.onload執行的早噢)
以下為前端大佬們的補充
3.要解決例2中的問題,可以使用Jquery 中另一個關於頁面加載的方法 ---load() 方法。 Load() 方法會在元素的 onload 事件中綁定一個處理函數。如果處理函數綁定給 window 對象,則會在所有內容 ( 包括窗口、框架、對象和圖像等 ) 加載完畢後觸發,如果處理函數綁定在元素上,則會在元素的內容加載完畢後觸發。(來源https://www.cnblogs.com/fengchaoran/p/7493803.html)
$(window).load(function(){})
window.onload = function(){}
//這兩個是一樣的
註意:不要不要在$(document).ready()裏綁定load事件
只有當在這個元素完全加載完之前綁定load的處理函數,才會在他加載完後觸發。如果之後再綁定就永遠不會觸發了。所以不要在$(document).ready()裏綁定load事件,因為jQuery會在所有DOM加載完成後再綁定load事件。
根據不同的瀏覽器(Firefox 和 IE),如果圖像已被緩存,則也許不會觸發 load 事件。
4..在原生JS中,監聽DOM執行的事件為DOMContentLoaded,不過此方法只能通過 DOM2 級方式添加,即采用addEventListener()/attachEvent() 方式添加才能夠使用。(來自https://blog.csdn.net/lwx931449660/article/details/86096415)
$(document).ready和window.onload 簡單分析區別