JQuery的$(document).ready(function(){})與JS的window.onload 的各自優點！

時間 2019-11-08

標籤 jquery document ready function window.onload window onload 各自優點欄目 JQuery 简体版

原文原文鏈接

因爲項目須要，使用JQuery也有至關一段時間了。因爲常常要處理DOM節點加載、圖片顯示以及動態資源請求，因此對$(document).ready(function(){})理解也愈來愈深了，全部在此分享個人一些體會：javascript

1. $(document).ready(function(){...}) 此方法是JQuery版本的window.onload = function(){...}。html

　　1.1 $(document).ready(function(){...})的其餘兩種縮寫形式： $().ready(function(){...})【這種寫法官方文檔上說不建議使用】和 $(function(){...})。java

　　1.2 $(document).ready(function(){...})與window.load執行順序：$(document).ready(...)是在頁面加載完全部DOM節點文檔結構後開始執行，window.onload則是在頁面加載全部資源後纔開始執行。也就是說window.onload要等到全部圖片，外鏈資源都加載完後纔開始執行，也所以window.onload只容許定義一個（實際是能夠定義多個，但只有最後一個有效，至關於前面會被覆蓋掉），而$(function(){...})能夠容許定義多個，而且按照定義的前後順序前後執行。對於大部分應用狀況下，$(function(){...})能夠說完勝window.onload，所以其執行時間早，用戶體驗就更好。可是在一些特定狀況下，狀況不必定，在下面第2節會舉例說明。web

2. $(document).ready(function(){...})很差使或者說不如window.onload的狀況：spa

　　2.1 由於$(document).ready(function(){...})是在一旦DOM節點加載完後就開始執行，可是如何頁面中引用的其餘的JS腳本，而且修改了一些DOM節點結構，那麼這個時候$(document).ready(function(){..})就有可能沒法檢測到實際的節點。例如：code

 1 <html>
 2 <head>
 3 <script src="/Scripts/MyJS.js?v=1.0.0>" type="text/javascript"></script>
 4 <script type="text/javascript"> $(function(){...}); </script>
 5 </head>
 6 <body>
 7 ...
 8 <div> 9 .... 10 </div>
11 ....
12 </body>
13 </html>

　　在MyJs.js中有對應的代碼將上述代碼中的綠色DIV加上class = 「title2"屬性。這個時候可能因爲MyJs.js比較大，在執行$(function(){....})時，MyJs.js還沒加載完，我若是在$(function(){...}中就沒法使用$("div.title2")等來進行選擇節點。固然，你能夠在執行$("div.title2")代碼以前加上定時器進行解決這種狀況，可是因爲不知道要等多長時間才能獲取獲得div.title2，所以這種方法也不能徹底解決（你可能已經想到另外一種解決方法了，那就是能夠採用setInternal來解決這個問題了，實際上也確實能夠，我本身也使用過此方法解決過實際問題，尤爲是一些圖片顯示的）。此時若是你用window.onload就不會有這個煩惱了！htm

　　2.2 另外一種狀況就是有一些頁面中能夠會嵌入一些web service，這個狀況下，使用$(function(){...})也可能沒法獲取到web service請求後的對應的DOM節點，其緣由與2.1相似，再也不贅述。blog

　　這是我本身在運用JQuery解決實際一些問題時的一些體會，若是有不對之處，歡迎你們指出加入改正，分享！圖片