最近在改一个嵌入在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. 通过CAGradientLayer类实现色度差动画

    #import "ViewController.h" @interface ViewController () { CAGradientLayer *_gradientLayer; ...

  2. HF Code Designer 代码生成器

    最近忙于项目和平台开发好久没写博客了,今天把最近的一个项目总结和大家分项一下. 在平台开发的过程中,代码生成器是必不可少的,Net领域的代码生成器比较多,以前用动软的,最早的那个版本还是开源,自己写了 ...

  3. [JavaEE] 深入理解Struts2的ognl标签

    OGNL是Object-Graph Navigation Language的缩写,全称为对象图导航语言,是一种功能强大的表达式语言,它通过简单一致的语法,可以任意存取对象的属性或者调用对象的方法,能够 ...

  4. c#代码使用ResourceDictionary样式

    对于ResourceDictionary样式代码: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006 ...

  5. vb.net中的SqlHelper

    1.定义: SqlHelper是一个基于·NET Framework的数据库操作组件.组件中包含数据库操作方法.SqlHelper用于简化你重复的去写那些数据库连接(SqlConnection),Sq ...

  6. 在Firefox中通过AJAX跨域访问Web资源---

    一.解决在firefox中无法跨域访问的问题 AJAX从本质上讲就是命名用XMLHttpRequest组件来向服务端发送HTTP请求,请接收相应信息.至于成功接收到响应信息后的操作,就和普通的Web客 ...

  7. Laravel 清空配置缓存

    清空配置缓存 php artisan cache:clear php artisan config:clear

  8. 社区APP “钱途”漫漫

    花样年曾宣称:2013年“彩生活”物业品牌收入1.85亿,毛利率超过40%:万科万客会APP.龙湖物业APP……大量房地产企业依托物业企业,纷纷瞄准移动互联网.云计算.物联网等高新科技为基础的物业服务 ...

  9. 【Ionic】---App名字和图标修改+启动画修改(SplashScreen)

    APP名字 1 修改项目目录下config.xml--name标签 END APP图标和启动画 1 在项目的根目录下创建resources文件夹 在文件夹中都放入 icon.png(应用图标,最小19 ...

  10. 在Windows Server 2012 中安装 .NET 3.5 Framework,PowerShell 安装.NET FRAMEWORK

    问题 如今,仍然有许多程序和应用需要依靠.NET 3.5 framework 来运行.在Windows Server 2012中,微软提供了.NET 3.5 和.NET 4.5的安装选项以为你的应用程 ...