$(document).ready() 、 $('#id').load() 、window.onload 的区别

时间：2023-03-09 05:11:19
$(document).ready() 、 $('#id').load() 、window.onload 的区别

今天做项目的时候遇到一个问题，结果死在了$(document).ready()、 $('#id').load() 、window.onload的区别上。然后，就整理一下，这三者的区别。

参考文章：http://www.jb51.net/article/21628.htm     http://www.frontopen.com/900.html  http://blog.****.net/leobig/article/details/40737941

先说$(document).ready()和window.onload的区别

jQuery中的ready特指“DOM”全部加载完毕，也就是说，只要DOM加载完毕了，这个事件自然被触发了。
所谓“DOM”加载完毕指整个页面的标签部分全部加载完毕，至于说某些标签内部可能还存在着一系列事件未完成（譬如img标签可能加载远处一个很大的bmp图片尚未加载完毕等情况）则被忽略。因此对于单纯设置某些Html标签的事件或者属性的绑定而言，在ready方法中显然比load更为适合

load必须等到全部的标签都处于完成状态，包括img把图片全部加载完毕为止）。

1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

        $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

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

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

window.onload和$('#id').load() 是类似的

ready事件：

ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。

load事件：

load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。

总结： 

相信大家已经了解了ready与load的区别，其实如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的，但是页面中有文件就不一样了，所以还是推荐大家在工作中用ready。

另外值得注意的是：

$(document).load是错误的，因为“load”并不是document对象的一个内置的方法；如果要人为为某个标签对象增加一个自定义事件，在jQuery中你只能使用bind方法增加一个自定义的事件，然后必须使用trigger去人为触发这个自定义事件。

随机推荐

  1. HDU2686-Matrix & HDU3376-Matrix Again（费用流）

    比较简单的题了. 只需从左上角到右下角找两条路就可以了. 因为每个点只能走一次,所以拆点,限制流量为1. 因为求的是最大值,所以权值取反求最小值. 因为第一个点和最后一个点经过两次,只算一次,最后要减 ...

  2. Android实例-处理隐藏输入法后不再显示问题(XE8+小米2)

    结果: 1.可以处理再次显示问题,但缺点是每个控件都要处理一次,累.哪位大神有好的处理方法,请M我. 实例代码: unit Unit1; interface uses System.SysUtils, ...

  3. delphi 调用 webservice (.NET C#版)

    uses XMLIntf, XMLDoc; XML to XTR文件转换 .File-->open打开你要分析的XML文件 .在左边选择你要分析的接点,双击加到中间的转换列表中 .Create- ...

  4. android 随手记 videoview循环播放网络视频 和mediaplayer+sufaceview播放网络视频

    1:videoview循环播放视频 1>xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res ...

  5. C#抽象工厂模式的几种实现方法及比较

    C#抽象工厂模式的几种实现方法及比较 本文转自:http://hi.baidu.com/tufeivista/blog/item/2ca9702978dcc6fb99250a81.html 利用设计模 ...

  6. 使用jdbc连接上oracle的两种方法

    1. 使用thin连接 优点:thin驱动都是纯Java代码,并且使用TCP/IP技术通过java的Socket连接上Oracle数据库,所以thin驱动是与平台无关的,无需安装Oracle客户端,只 ...

  7. 【IBM】使用 CAS 在 Tomcat 中实现单点登录

    来源: IBM Developer http://www.ibm.com/developerworks/cn/opensource/os-cn-cas/ 张 涛 (zzhangt@cn.ibm.com ...

  8. SCOM随笔

    1.在监控群集资源时,安装完agent后,在代理管理-agent属性中选中“允许此代理充当代理并发现其他计算机上的托管对象” 如果监控DC的话,也要选中该选项

  9. UIWebView的使用，简单浏览器的实现

    #import "ViewController.h" @interface ViewController () <UIWebViewDelegate> @propert ...

  10. Linux性能实时监测工具 Netdata

    http://www.oschina.net/p/netdata?fromerr=hjJMgUjE#rd

相关文章