$(document).ready()与 window.onload执行时机
$(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是子啊网页中的所有元素（包括元素的所有关联的文件）完全加载到浏览器后才执行，即javascript此可以访问网页中的任何元素。而通过jquery中的$(document).ready()方法注册的时间处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jquery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。
举一个例子，有一个大型的图库网站，为网页中的所有图片添加某些行为，例如单机图片后让他隐藏或显示。如果使用window.onload方法来处理，那么用户必须等到每一副图片都加载完毕后，才可以进行操作。如果使用jquery中的$(document).ready()方法来进行设置，只要DOM就绪就可以操作了，不需要等待所有图片加载完毕。显然，吧网页解析为DOM树的速度比吧网页中的所有关联文件加载完毕的素的快很多。
另外，需要注意一点，由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经即诶下为DOM树了，但很有可能图片还未加载完毕，所有例如图片的高度和宽度这样的属性此时比一定有效。要解决这个问题，可以使用Jquery中另一个关于页面加载的方法-----load（）方法。load（）方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容（包括窗口。框架，对象和图像等）加载完毕后触发，如果处理函数绑定在元素上，则会在元素的被容加载完毕后加载。jquery代码如下：
$(window).load(function(){
//代码
});
等价于javascript中的以下代码：
window.onload=function(){
//代码
}
例如1：时间加载对比：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
var startTime = new Date().getTime();
$(document).ready(function(){
test1();
}) function test1(){
var endTime2 = new Date().getTime();
var a = endTime2 - startTime;
$("<div>jQuery的ready() : "+a+" ms</div>").appendTo("body");
} function test2(){
var endTime1 = new Date().getTime();
var b = endTime1 - startTime;
$("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("body");
}
</script>
</head>
<body onload="test2();">
<img src="demo.jpg" style="width:200px;height:200px;"/>
</body>
</html>
window.onload
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function one(){
alert("one");
}
function two(){
alert("two");
}
window.onload = one ;
window.onload = two ;
</script>
</head>
<body> </body>
</html>
document.ready
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
function one(){
alert("one");
}
function two(){
alert("two");
}
$(document).ready(function(){
one();
})
$(document).ready(function(){
two();
})
</script> </head>
<body> </body>
</html>
出处：锋利的jquery第二版 P99
随机推荐
- StringUtils判断字符串是否为空的方法
public static boolean isEmpty(String str) 判断某字符串是否为空,为空的标准是 str==null 或 str.length()==0 下面是 Stri ...
- NoSQL架构实践（一）——以NoSQL为辅
前面<为什么要使用NoSQL>和<关系数据库还是NoSQL数据库>两篇从大体上介绍了为什么要用NoSQL,何时该用NoSQL.经常有朋友遇到困惑,看到NoSQL的介绍,觉得很好 ...
- IPC_共享内存
在IPC(InterProcess Communication)的通信模式下,不管是使用消息队列还是共享内存,甚至是信号量,每个IPC的对象(object)都有唯一的名字,称为“键”(key).通过“ ...
- selenium-grid2 远程并发控制用例执行
今天闲来无事,随意看了一下selenium,突然注意到grid这个功能以前都是,在读有关selenium的文档时候知道有这么个grid远程控制的功能,但一直没有去试过.所以呢,今天就简单的做了这么个小 ...
- BF-KMP 算法
#define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include<string. ...
- static_cast .xml
pre{ line-height:1; color:#1e1e1e; background-color:#d2d2d2; font-size:16px;}.sysFunc{color:#627cf6; ...
- 操作符重载.xml
pre{ line-height:1; color:#1e1e1e; background-color:#d2d2d2; font-size:16px;}.sysFunc{color:#627cf6; ...
- C++中string 的使用
string类的构造函数:string(const char *s); //用c字符串s初始化string(int n,char c); //用n个字符c初始化此外,string类还支持 ...
- AI教程
AI制作铅笔图案笔刷 在下面的步骤中,我们将学习如何在Adobe Illustrator中创建铅笔笔刷.首先你要建立一个简单的网格,以及如何使用基本的工具和形状创建主要的形状.然后,学习如何保 ...
- MyEclipse2015对Javascript自动提示的终极支持
2015通过集成Tern.js,进入了JS自动提示的最新时代 先看看具体效果吧: 点击链接会进入: 而tern.js已经支持相当多的框架: 关键这个提示不只是纯粹的js文件,对于jsp等等 ...