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 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
Vue实现简单的留言板
Oct 23 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
Exjs 入门篇
2010/04/07 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
javascript的内存管理详解
2013/08/07 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
详解jQuery选择器
2016/12/21 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
vue filters的使用详解
2018/06/11 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
详解Vue之父子组件传值
2019/04/01 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
python实现图片插入文字
2019/11/26 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Python如何使用input函数获取输入
2020/08/06 Python
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android