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 相关文章推荐
js 代码优化点滴记录
Feb 19 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
js分页代码分享
Apr 28 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
详解redux异步操作实践
Aug 15 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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笔记之:AOP的应用
2013/04/24 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
JS重要知识点小结
2011/11/06 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
javascript学习之json入门
2016/12/22 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
小程序实现投票进度条
2019/11/20 Javascript
详解JS预解析原理
2020/06/16 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
Python字符串切片操作知识详解
2016/03/28 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
举例讲解Python装饰器
2020/12/24 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
医学院毕业生自荐信范文
2014/03/06 职场文书
战略合作意向书范本
2014/04/01 职场文书
表彰大会新闻稿
2015/07/17 职场文书
用python实现监控视频人数统计
2021/05/21 Python
MySQL 数据表操作
2022/05/04 MySQL