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实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
javascript实现行拖动的方法
May 27 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
canvas知识总结
Jan 25 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
网页前台通过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上显示JFreechart画的统计图方法
2013/11/03 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
js中document.write的那点事
2014/12/12 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
js实现碰撞检测
2021/01/29 Javascript
python如何在循环引用中管理内存
2018/03/20 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python操作kafka实践的示例代码
2019/06/19 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
旷课检讨书2000字
2014/01/14 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
企业标语口号
2014/06/10 职场文书
学生会自荐信
2019/05/16 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
详解TypeScript的基础类型
2022/02/18 Javascript