jquery的$(document).ready()和onload的加载顺序


Posted in Javascript onMay 26, 2010

最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件。改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉了。

起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了,还不见jquery的效果出来。

删了onload加载的方法试试,结果还是一样,看来没有必要把原本的onload事件绑定也改用$(document).ready()来写。那是什么原因使得Firefox正常而IE就能呢?接着调试,发现IE下原来绑定的onload方法竟然先于$(document).ready()的内容执行,而Firefox则是先执行$(document).ready()的内容,再执行原来的onload方法。这个和网上的说法似乎不完全一致啊,呵呵,有点意思,好像越来越接近真相了。

翻翻jquery的源码看看$(document).ready()是如何实现的吧:

if ( jQuery.browser.msie && window == top ) (function(){ 
if (jQuery.isReady) return; 
try { 
document.documentElement.doScroll("left"); 
} catch( error ) { 


setTimeout( arguments.callee, 0 ); 



 return; 


} 

 // and execute any waiting functions 

 jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready );

结果很明了了,IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload方法。对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。

作者:Joyce Liu

Javascript 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
js 替换
Feb 19 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 #Javascript
jQuery select操作控制方法小结
May 26 #Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 #Javascript
JQuery 动态扩展对象之另类视角
May 25 #Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 #Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 #Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 #Javascript
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python实现超简单端口转发的方法
2015/03/13 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
党员公开承诺书
2014/03/25 职场文书
学习与创新自我评价
2015/03/09 职场文书
实施意见格式范本
2015/06/05 职场文书