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解决实际一些问题时的一些体会，若是有不对之处，欢迎你们指出加入改正，分享！图片