最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件。
改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉了。
最近在改一个嵌入在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; 
    } www.jbxue.com
   // and execute any waiting functions 
   jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready ); 
结果很明了了,IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload方法。对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。 

jquery的$(document).ready()和onload的加载顺序的更多相关文章

  1. jQuery的document ready与 onload事件——你真的思考过吗?

    在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...

  2. html中defer和window.onload的加载顺序

    结论:defer执行的顺序先于window.onload! 案例: html代码: <!DOCTYPE html> <html lang="en"> < ...

  3. JQuery的$(document).ready(function(){})与JS的window.onload 的各自优势!

    由于项目需要,使用JQuery也有相当一段时间了.由于经常要处理DOM节点加载.图片显示以及动态资源请求,所以对$(document).ready(function(){})理解也越来越深了,所有在此 ...

  4. (function($){...})(jQuery)和$(document).ready(function(){}) 的区别

    (function($){...})(jQuery)  实际上是执行()(para)匿名函数,只不过是传递了jQuery对象.   立即执行函数:相当于先申明一个函数,声明完后直接调用: 用于存放开发 ...

  5. 20180911 关于页面加载顺序引发的JS的undefined/null错误

    引用: 百度知道-HTML+JavaScript执行顺序问题 这是我在学习JS滚动播放图片案例意外遇到的一个问题,代码完成后console弹出错误警告: Uncaught TypeError: Can ...

  6. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  7. javascript的window.onload()方法和jQuery的$(document).ready()的对比

    jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  8. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  9. 【jquery】$(document).ready() 与window.onload的区别

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1)执行时间  wind ...

随机推荐

  1. 1.4.8 拼凑在一起(putting the pieces together)

    putting the pieces together 在最高的级别,schema.xml结构如下, <schema> <types> <fields> <u ...

  2. 在提交SVN时有时候会报svn is already locked 错误

    svn is already locked 解决方案: 如题所述经常在更新代码的时候会产生这样的问题!并且在对应的目录上操作Clean Up 没有任何的效果!如下解决方法. 在出错文件夹下,鼠标右键T ...

  3. iOS UITableView的一些方法

    项目中用到的一些tabview 问题及对应方法: 一.tableview 1.下划线左对齐 //步骤一:(加在 viewdidload方法中) if([tabView respondsToSelect ...

  4. 判断当前是否运行于Design Mode

    在使用Visual Studio设计XAML时,设计器运行在[设计时]状态.VS在内部运行这些代码,帮你把界面的类真实效果展示出来.一般情况下也不会有什么问题,但是当代码中存在外部资源时,XAML可能 ...

  5. hdu-5690 All X(快速幂+乘法逆元)

    题目链接: All X Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (Java/Others) Pro ...

  6. Matlab的GUI参数传递方式总结

    MATLAB GUI传递方式 1.全局变量: 2.作为函数的参数传递: 3.利用控件的userdata数据: 4.为handles结构体添加新字段: 5.setappdata函数为句柄添加数据: 6. ...

  7. 转: ffmpeg 的deom列表

    http://blog.csdn.net/leixiaohua1020/article/details/47072861

  8. 转: javaWeb学习总结(见过最好的知识合集,相当给力,强烈推荐)

    转: http://www.cnblogs.com/xdp-gacl/tag/JavaWeb%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/default.html?page ...

  9. TortoiseSVN 更新时忽略指定文件夹

    命令行可以这么来svn update –set-depth=exclude 文件夹 那么TortoiseSVN客户端呢?在文件夹右键中的”更新至版本(U)”更新深度选”排除”,确定,搞定下次更新就不会 ...

  10. MVC datetime? & datetime 设置格式

    设置datetime的格式,直接有方法重载进行,即使数据为datetime?格式 设置起始时间在配置的时候添加设置 $('#closeTime').datetimepicker({ language: ...