$(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
随机推荐
- 部署K2 Blackpearl流程时出错（与基础事务管理器的通信失败或Communication with the underlying transaction manager has failed.
转:http://www.cnblogs.com/dannyli/archive/2011/12/01/2270222.html 亲,在部署K2流程是,是否遇到这个错误(以下是中.英文错误信息) 中文 ...
- 模式自由(Schema-free)和数据存储的非格式化趋势
最近遐想,数据存储的非格式化趋势. 格式化表格到自由的XML存储 数年以前,多家数据库厂商开始XML数据库存储.XML数据作为一种自描述的半结构化数据为Web的数据管理提供了新的数据模型,如果将XML ...
- 如何配置Drupal数据库信息？
Drupal的数据库连接信息通过文件settings.php中的变量$databases设置.变量$databases是一个二维的数组,第一维称为key,第二维称为target.使用这种方式可以处理多 ...
- Initializing a Build Environment
This section describes how to set up your local work environment to build the Android source files. ...
- switch……case不能匹配字符串的方法 .xml
pre{ line-height:1; color:#d1653c; background-color:#000000; font-size:16px;}.sysFunc{color:#566d68; ...
- vs2008编译boost
vs2008编译boost [一.Boost库的介绍] Boost库是一个经过千锤百炼.可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的发动机之一.Boost库由C++标准委员会库 ...
- Python学习第二天数组
1:Python定义数组:a=[0,1,2,3,4] ; 打印数组list(a); 这时:a[0]=0, a[1]=1, a[[2]=2...... 1.1:如果想定义一个很长的数组可以用到pyt ...
- Windows Azure Platform 系列文章目录
Windows Azure Platform (一) 云计算的出现 Windows Azure Platform (二) 云计算的分类和服务层次 Windows Azure Platform (三) ...
- 第三百五十九天 how can I 坚持
在家待了一天,鼓捣了下linux,总算能连上网了,懂得还是少啊. 晚上去华北电力大学跑了会步,十圈,还挺有成就感呢,就是没带手环,哎. 以后学习一定要记笔记,上了这么多年学,都 没学会怎么记笔记,也是 ...
- QueryInterface
QueryInterface IUnknown *p2; hr = pInnerUnknown->QueryInterface(vGUID2, (void**)&p2); IUnknow ...