[Javascript]jquery $(document).ready() 与window.onload的区别
引用:http://www.jb51.net/article/21628.htm
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
以
浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript
代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。
$(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。
window.load $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行 网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完
编写个数 不能同时编写多个
以下代码无法正确执行:
window.onload = function(){
alert(“text1”);
};
window.onload = function(){
alert(“text2”);
};
结果只输出第二个 能同时编写多个
以下代码正确执行:
$(document).ready(function(){
alert(“Hello World”);
});
$(document).ready(function(){
alert(“Hello again”);
});
结果两次都输出
简化写法 无 $(function(){
// do something
});
另外,需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM
就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕,并且已经解析为 DOM
树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用 Jquery
中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给
window 对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 )
加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。
Jquery 代码如下:
$(window).load(function (){
// 编写代码
});等价于 JavaScript 中的以下代码
Window.onload = function (){
// 编写代码
}
——————————————————————————————
最近在改一个嵌入在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绑定的方法执行之后才轮到。而
这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。
您可能感兴趣的文章:
- jquery中的$(document).ready()使用小结
- Jquery中"$(document).ready(function(){ })"函数的使用详解
- JQuery的ready函数与JS的onload的区别详解
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- jquery ready函数、css函数及text()使用示例
- jquery ready(fn)事件使用介绍
- JQuery onload、ready概念介绍及使用方法
- jQuery之$(document).ready()使用介绍
- jQuery 源码分析笔记(4) Ready函数
- jQuery ready函数滥用分析
- Jquery知识点一 Jquery的ready和Dom的onload的区别
- jquery ready()的几种实现方法小结
- jquery的$(document).ready()和onload的加载顺序
- JQuery中的ready函数冲突的解决方法
- 比Jquery的document.ready更快的方法
- JQuery 引发两次$(document.ready)事件
- JQuery下关于$.Ready()的分析
- 提取jquery的ready()方法单独使用示例
[Javascript]jquery $(document).ready() 与window.onload的区别的更多相关文章
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...
- jQuery中$(document).ready()和window.onload的区别?
document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...
- 转 $(document).ready()与window.onload的区别
$(document).ready()和window.onload在表单上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document).ready()和window.onloa ...
- document.ready与window.onload的区别
代码分析: $(document).ready(function() { .... }); window.onload=function(){ ....} 两段代码功能上可以互换,但又有许多区别: 1 ...
- $(document).ready和window.onload的区别
$(document).ready比window.onload先执行.window.onload只执行一次. $(document).ready和window.onload都是在都是在页面加载完执行的 ...
- $(document).ready 与 window.onload的区别?
$(document).ready = function(){}; DOM树加载完成时执行,此时文件不一定都已加载完成. window.onload = function(){}; DOM树加载完成 ...
- 转载 jquery $(document).ready() 与window.onload的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- [转]jquery $(document).ready() 与window.onload的区别
http://blog.csdn.net/xiebaochun/article/details/36375481 Jquery中$(document).ready()的作用类似于传统JavaScrip ...
随机推荐
- 在VS2012中实现Ext JS的智能提示
Visual Studio 2012太强大了,居然能自己会去提取Ext JS的类的属性和方法,从而实现只能提示.下面就来介绍一下实现这个功能. 在Visual Studio 2012中随便创建一个We ...
- windows下php cli模式,提示出错
搞一下php cli,一直提示,找不到php_pdo_mssql.dll模块 原来是在php.ini加载了该模块,但ext下又没有该模块 即便下载了一个php_pdo_mssql.dll,但还是会提示 ...
- find 命令概览
Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时 ...
- Dubbo远程调用服务框架原理与示例
Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成. 主要核心部件: Remoting: 网络通信框架 ...
- Java日期格式化
翻译人员: 铁锚 翻译时间: 2013年11月17日 原文链接: Simple example to show how to use Date Formatting in Java 代码示例如下, ...
- poj3468A Simple Problem with Integers(线段树,在段更新时要注意)
Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...
- JdkDynamicAopProxy源码
JdkDynamicAopProxy是通过接口实现动态代理类,主要方法是getProxy(ClassLoader classLoader), 代理类生成之后再调用目标方法时就会调用invoke方法. ...
- C# 支付宝接口
生成URL链接 1using System; 2using System.Data; 3using System.Configuration; 4using System.Collectio ...
- Flex 拾色器改变背景
package { import flash.display.*; import flash.geom.*; import flash.utils.*; import mx.core.EdgeMe ...
- PaaS平台资源
http://www.vagrantup.com/ http://www.docker.com/