$(document).ready和window.onload 簡單分析區別

blog 基礎 sele 點擊實現 tel bubuko 等價加載完成

《鋒利的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運行得更早一些

舉例：

console.log( $("img").alt) ) </script> <body> <button onclick="ale()" id="btn">點擊提示</button> <img src="https://img3.mukewang.com/5c830c2e0001022510241024-140-140.jpg" alt="pic"> </body>

技術分享圖片

可以看到，在$(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 簡單分析區別

$(document).ready和window.onload 簡單分析區別

相關推薦