$(document).ready()和window.onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) ready()和window onload还是有区别的。

最基本的区别

1.执行时间

  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
  $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

2.编写个数不同

  window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
  $(document).ready()可以同时编写多个,并且都可以得到执行

3.简化写法

  window.onload没有简化写法 
  $(document).ready(function(){})可以简写成$(function(){});

  $(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对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

$(window).load(function(){  } )  等价于js中的   window.onload=funciton(){  }

ready和onload的区别的更多相关文章

  1. document.ready和onload的区别

    转自:http://holysonll.blog.163.com/blog/static/2141390932013411112823855/ document.ready和onload的区别——Ja ...

  2. JS 页面加载触发事件 document.ready和onload的区别(转)

    原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...

  3. JS 页面加载触发事件 document.ready和onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  4. $(function(){})、$(document).ready(function(){})....../ ready和onload的区别

    1.window.onload 当一个文档完全下载到浏览器中时,会触发 window.onload 事件. 这意味着页面上的全部元素对 javascript 而言都是可以访问的,这种情况对编写功能性的 ...

  5. 谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

  6. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  7. $(document).ready()和onload() html渲染时的区别

    不谈调用次数,加载先后问题,只看渲染时区别 1.都在数据绑定完加载. 2.ready可以有多个,且都执行,onload虽可以写多个,但是只执行最后一个. 3. $.ready = function ( ...

  8. [转载]谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

  9. javascript jquery document.ready window.onload

    网易 博客 下载LOFTER客户端 注册登录  加关注 凡图的编程之路 2012年7月从一个编程新手的点点滴滴 首页 日志 LOFTER 相册 博友 关于我     日志       关于我 Holy ...

随机推荐

  1. ubuntu14.04 wifi驱动

    ubuntu崩溃后再安装后,发现没有了wifi按钮 因为必须要用wifi不然太不方便了,于是在网上找了一下,安装了一下驱动就解决了 首先确定无线网卡类型: $ lspci -vnn -d 14e4: ...

  2. git入门学习

    初步学习笔记. 1.创建仓库:git init 仓库:个人理解为文件存放及版本追踪的容器,对应着一个目录,目录中包含用户的文件及git用来追踪文件版本的一系列文件. 新建并进入HelloWorld目录 ...

  3. powershell开源新闻及简介

    作者:PowerShll传教士 问:微软的PowerShell脚本语言已经开源了 ? 答:绝对真的!已经! 问:源码在哪? 答:微软.net源码网站.   http://referencesource ...

  4. linux命令每日一练习 wc more

    wc该命令统计文件行数,字数或者字节数 wc -l 统计行数 wc -w 统计字数 wc -c 统计字节数 more 显示文件内容,类似于cat more +n 从第n行开始显示 more -n 限定 ...

  5. TortoiseSVN文件夹及文件图标不显示解决方法

              由于自己的电脑是win7(64位)的,系统安装TortoiseSVN之后,其他的功能都能正常的使用,但是就是文件夹或文件夹的左下角就是不显示图标,这个问题前一段时间就遇到了(那个时 ...

  6. c/c++常用网址

    个人主页Dennis Ritchie's home pagehttp://cm.bell-labs.com/cm/cs/who/dmr/index.html Brian Kernighan's hom ...

  7. javamail 发送附件

    1.属性文件 mail.protocol=smtpmail.host=mail.port=mail.auth=truemail.timeout=25000mail.username=mail.pass ...

  8. spring aop 声明式事务管理

    一.声明式事务管理的概括 声明式事务(declarative transaction management)是Spring提供的对程序事务管理的方式之一. Spring的声明式事务顾名思义就是采用声明 ...

  9. UIKit框架之UIGestureRecognizer

    ---恢复内容开始--- 1.继承链:NSObject 2.UIGestureRecognizer的子类有以下: UITapGestureRecognizer :点击 UIPinchGestureRe ...

  10. oracle xmltype导入并解析Excel数据 (一)创建表与序

    表说明: T_EXCEL_IMPORT_DATASRC: Excel数据存储表,(使用了xmltype存储Excel数据) 部分字段说明: BUSINESSTYPE: Excel模板类型,一个Exce ...