$(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

随机推荐

  1. final修饰符,finally,finalize区别

    1.final 如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此,一个类不能即被声明为abstract,又被声明为final.将变量或方法声明为final,可以保证 ...

  2. Android 一步步教你从ActionBar迁移到ToolBar

    谷歌的材料设计也发布了有一段时间了,包括官方的support库 相信大家也熟悉了不少,今天就把actionbar 迁移到toolbar的 经验发出来. 这个地方要注意 我用的图标都是studio里的一 ...

  3. C# DataGridView的初始化

    动态添加列和行 方法一 通过手动添加Datatable,再绑定dataGridView DataTable dt = new DataTable();//建立个数据表 dt.Columns.Add(n ...

  4. Android 校验apk文件渠道号、包名、版本号

    功能:可查看单个或目录下所有apk文件的渠道号.包名.版本号 下载地址:http://download.csdn.net/detail/zgz345/9248487使用:以查看包名.版本号为例 1.c ...

  5. DDoS攻防战（二）：CC攻击工具实现与防御理论

    我们将要实现一个进行应用层DDoS攻击的工具,综合考虑,CC攻击方式是最佳选择,并用bash shell脚本来快速实现并验证这一工具,并在最后,讨论如何防御来自应用层的DDoS攻击. 第一步:获取大量 ...

  6. hdu 1527 取石子游戏（Wythoff Game）

    题意:Wythoff Game 思路:Wythoff Game #include<iostream> #include<stdio.h> #include<math.h& ...

  7. ORACLE TM锁

    Oracle的TM锁类型 锁模式 锁描述 解释 SQL操作 0 none 1 NULL 空 Select 2 SS(Row-S) 行级共享锁,其他对象只能查询这些数据行 Select for upda ...

  8. Raspberry Pi3 ~ 安装samba服务

    文章转载自此博文 1. sudo apt-get install samba 如果出现错误提示,则需要先执行sudo apt-get update,再重新执行sudo apt-get install ...

  9. ASP.NET 如何做出简单的验证码

    如果说要做验证码,那不得不提的就是GDI+绘图了.我们都知道验证码是以图片形式展示的,而且是动态生成的,这样就需要我们去画出它. 科普一下,什么是GDI+? GDI+是图形设备接口(GDI)的高级版本 ...

  10. ChromePHP - Chrome浏览器下的PHP debug工具

    一款 Chrome 下用来配合调试 PHP 的工具,看官方介绍应该和 FirePHP 有异曲同工的.喜欢用Chrome 的PHPer 可以尝试一下. 官方网站:http://www.chromephp ...