JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势！
由于項目需要，使用JQuery也有相當一段時間了。由于經常要處理DOM節(jié)點加載、圖片顯示以及動態(tài)資源請求，所以對$(document).ready(function(){})理解也越來越深了，所有在此分享我的一些體會：
1. $(document).ready(function(){...}) 此方法是JQuery版本的window.onload = function(){...}。
1.1 $(document).ready(function(){...})的其他兩種縮寫形式： $().ready(function(){...})【這種寫法官方文檔上說不建議使用】 和 $(function(){...})。
1.2 $(document).ready(function(){...})與window.load執(zhí)行順序：$(document).ready(...)是在頁面加載完所有DOM節(jié)點文檔結構后開始執(zhí)行，window.onload則是在頁面加載所有資源后才開始執(zhí)行。也就是說window.onload要等到所有圖片，外鏈資源都加載完后才開始執(zhí)行，也因此window.onload只允許定義一個（實際是可以定義多個，但只有最后一個有效，相當于前面會被覆蓋掉），而$(function(){...})可以允許定義多個，并且按照定義的先后順序先后執(zhí)行。對于大部分應用情況下，$(function(){...})可以說完勝window.onload，因此其執(zhí)行時間早，用戶體驗就更好。但是在一些特定情況下，情況不一定，在下面第2節(jié)會舉例說明。
2. $(document).ready(function(){...})不好使或者說不如window.onload的情況：
2.1 因為$(document).ready(function(){...})是在一旦DOM節(jié)點加載完后就開始執(zhí)行，但是如何頁面中引用的其他的JS腳本，并且修改了一些DOM節(jié)點結構，那么這個時候$(document).ready(function(){..})就有可能無法檢測到實際的節(jié)點。例如：
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比較大，在執(zhí)行$(function(){....})時，MyJs.js還沒加載完，我如果在$(function(){...}中就無法使用$("div.title2")等來進行選擇節(jié)點。當然，你可以在執(zhí)行$("div.title2")代碼之前加上定時器進行解決這種情況，但是由于不知道要等多長時間才能獲取得到div.title2，因此這種方法也不能完全解決（你可能已經想到另一種解決方法了，那就是可以采用setInternal來解決這個問題了，實際上也確實可以，我自己也使用過此方法解決過實際問題，尤其是一些圖片顯示的）。此時如果你用window.onload就不會有這個煩惱了！
2.2 另一種情況就是有一些頁面中可以會嵌入一些web service，這個情況下，使用$(function(){...})也可能無法獲取到web service請求后的對應的DOM節(jié)點，其原因與2.1類似，不再贅述。
轉載于:https://www.cnblogs.com/gates/p/3193947.html
總結
以上是生活随笔為你收集整理的JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实现EventHandler的监测
- 下一篇： 常用SQL整理