JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势!
来源:互联网 发布:mac禁止开机启动项 编辑:程序博客网 时间:2024/05/18 01:47
由于项目需要,使用JQuery也有相当一段时间了。由于经常要处理DOM节点加载、图片显示以及动态资源请求,所以对$(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执行顺序:$(document).ready(...)是在页面加载完所有DOM节点文档结构后开始执行,window.onload则是在页面加载所有资源后才开始执行。也就是说window.onload要等到所有图片,外链资源都加载完后才开始执行,也因此window.onload只允许定义一个(实际是可以定义多个,但只有最后一个有效,相当于前面会被覆盖掉),而$(function(){...})可以允许定义多个,并且按照定义的先后顺序先后执行。对于大部分应用情况下,$(function(){...})可以说完胜window.onload,因此其执行时间早,用户体验就更好。但是在一些特定情况下,情况不一定,在下面第2节会举例说明。
2. $(document).ready(function(){...})不好使或者说不如window.onload的情况:
2.1 因为$(document).ready(function(){...})是在一旦DOM节点加载完后就开始执行,但是如何页面中引用的其他的JS脚本,并且修改了一些DOM节点结构,那么这个时候$(document).ready(function(){..})就有可能无法检测到实际的节点。例如:
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就不会有这个烦恼了!
2.2 另一种情况就是有一些页面中可以会嵌入一些web service,这个情况下,使用$(function(){...})也可能无法获取到web service请求后的对应的DOM节点,其原因与2.1类似,不再赘述。
这是我自己在运用JQuery解决实际一些问题时的一些体会,如果有不对之处,欢迎大家指出加入改正,分享!
- JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势!
- window.onload与jquery的$(document).ready
- jq的 $(function(){}) , document.ready 与 window.onload 的区别
- $(document).ready()、 $(function(){})、$().ready(function(){})和window.onload的区别
- js的window.onload和jquery document.ready()的区别
- javascript的window.onload与jquery的$(document).ready()
- jquery的$(document).ready()方法 与 window.onload 的区别
- JS 替换 window.onload 的 document.ready
- JS 替换 window.onload 的 document.ready
- JS 替换 window.onload 的 document.ready
- JS 替换 window.onload 的 document.ready
- jquery中的$(document).ready()与window.onload的区别
- [转]jQuery $(document).ready()与window.onload的区别
- jquery $(document).ready() 与window.onload的区别
- jquery 中 $(document).ready() 与window.onload 的区别
- jquery中的$(document).ready()与window.onload的区别
- jquery $(document).ready() 与window.onload的区别
- 【jquery】一、 $(document).ready() 与window.onload的区别
- Ubuntu下安装samba
- vi 命令用法
- Valgrind 之 Cachegrind 调研报告
- 机器学习其实比你想的更简单
- 追踪Drill的最新进展
- JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势!
- SQL数据库三范式
- 【10.2移动新特性】GraphicsLayer新增动态模式,性能极大提升!
- 内存泄露
- 写代码文章最好这样
- 人生哲理
- [Java] Learning_Notes for J2SE
- C++ 写栈 和 队列
- cetos 上 开启 crontab的日志 和调试,并运行 和调试 java 脚本