最近在改一个嵌入在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. oracle 本地使用命令导入数据到远程主机

    第一步:装载oracle客户端 第二部:配置tnsnames.ora. db_172.21.1.7 = (DESCRIPTION = (ADDRESS = (PROTOCOL = TCP)(HOST ...

  2. UIView 的transitionFromView方法实现视图切换

    #import "ViewController.h" @interface ViewController () @property (strong, nonatomic) IBOu ...

  3. GCD三种队列

    :dispatch_get_global_queue 后台执行队列 :dispatch_get_main_queue 主队列 :dispatch_queue_create("test&quo ...

  4. 4. Android框架和工具之 android-async-http

    1. android-async-http   简介 主要有以下功能: (1)发送异步http请求,在匿名callback对象中处理response信息: (2)http请求发生在UI(主)线程之外的 ...

  5. u163是什么故障 佳能MX328 u163是什么意思?墨水打完了,我加了墨水后还是显示U163(请检查墨水-彩色)警告灯亮

    U163:墨水已用完.请更换墨盒,然后关闭“扫描单元”(“机盖”).如果打印正在进行并希望继续打印,请在不取出墨盒的情况下按 [Stop] (停止) 按钮至少 5 秒. 然后可以在墨水用完的情况下继续 ...

  6. 【阿里云产品公测】给ACE的建议

    作者:阿里云用户云想未来 今天给ace带来一些建议,首先,集群模式没什么好说的了,也不是新手用的,今天讲下单实例模式,建议ace开放独立ip购买,按天按月按年付费,收费可以5元左右,为什么这么说呢?其 ...

  7. Scrapy使用心得

    今天安装了大名鼎鼎的Scrapy,不过碰到了不少问题,包括"Unable to find vcvarsall.bat" 这个错误应该很常见的,用了最简单的解决方法: 安装visua ...

  8. python 基础——常用日志装饰器

    from functools import wraps class logit(): def __init__(self, logfile='out.log'): self.log = logfile ...

  9. JavaScript字符串分割方法

    使用split('')方法.此方法与Java的字符串分割方法方法名一样.

  10. 把Flume的Source设置为 Spooling directory source

    把Flume的Source设置为 Spooling directory source,在设定的目录下放置需要读取的文件,一些文件在读取过程中会报错. 文件格式和报错如下: 实验一 读取汉子和“:&qu ...