jQuery document window load ready 区别详解

用过JavaScript的童鞋，应该知道window对象和document对象，也应该听说过load事件和ready事件，小菜当然也知道，而且自认为很了解，直到最近出了问题，才知道事情并不是那么简单。

首先说说window和document，直观上来讲，window代表的是浏览器窗口，而document代表的是浏览器窗口中加载的dom元素，进一步说，document是window的一个属性，window是最顶级的对象。

二者有啥区别呢？很好理解，假设现在有一个浏览器，里边加载的页面特别长，已经超出了一屏，当然，肯定会出现滚动条了，这时 候，$(window).height()和$(document).height()是不相等的，document的高度肯定要比window的大，因 为window窗口始终就是那么大。见下图：

再说说load事件和ready事件(这里的load和ready是指jQuery的事件，下同)。

先说load，load事件主要就是用来代替原生的window.onload，它只能用在两个场景下：

·  window对象上。比如$(window).load(fn);。

·  带有URL的元素(images, scripts, frames, iframes)。比如$(“img”).load(fn);。

除此之外，任何元素都没有load事件，比如：$(document).load(fn);这是错误的写法，根本不会执行。

load事件需要页面完全加载完成才可以触发，所谓的完全加载完，不仅仅是dom结构加载完，还需要所有的链接引用都加载完才可以。比如页面中有大量图片，必须等每一个图片都加载完成，才叫完全加载完。

最重要的还没说，jQuery官方文档明确说明load事件的跨浏览器兼容性很差(It doesn't work consistently nor reliably cross-browser)。经过小菜测试，谷歌浏览器仅仅支持$(window).load(fn);，而火狐浏览器支 持$(window).load(fn);和$(“img”).load(fn);。

所以，除非必要情况下，否则强烈不推荐使用load事件。

最后说说ready，ready事件可以加在任意元素上，比如$(window).ready(fn);、$(document).ready(fn);、$(“div”).ready(fn);等等。

ready事件不要求页面完全加载完，只需要加载完dom结构即可触发。

ready事件可以同时注册多个，执行时，按照注册的先后顺序执行。注意，就算是注册不同元素的ready事件，也是按照先后顺序执行。例如下列代码：

1 $(window).ready(function(){

2   alert("window");

3 });

4 $(document).ready(function(){

5   alert("document");

6 });

7 $("div").ready(function(){

8   alert("div");

9 });

按照常理，应该是div先加载完，所以先执行alert("div");，然后才是alert("document");或 alert("window");，但遗憾的是，alert("div");是最后一个执行的。所以，无论是否在同一元素上注册ready事件，都是按照 注册的先后顺序执行。

最后一项，ready事件与window.onload(或<body onload=””>)是冲突的，如果使用了window.onload(或<body onload=””>)，将导致ready事件不执行。

经过如此多的讨论，最终证明：$(document).ready(fn);兼容性、安全性是最好的，如果有此类需求，尽量采用这种方式。

from:http://www.cnblogs.com/iyangyuan/p/3940451.html

document.ready与window.load区别的更多相关文章

  1. $(document).ready() 与$(window).load()

    虽说很早就开始接触JavaScript,自己也用JavaScript编写过许多代码,如之前的web版码表计时器,就写了近500行代码,函数也写了10个左右.当时也就是想到哪里就写到哪里,行不通就另外找 ...

  2. $(document).ready vs $(window).load vs window.onload

    原文地址: $(document).ready vs $(window).load vs window.onload $(document).ready We execute our code whe ...

  3. window.load 和$(document).ready() 、window.load和body onload区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.2.编写个数不同 w ...

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

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

  5. jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别

    大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...

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

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

  7. 转载jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...

  8. 转 $(document).ready()与window.onload的区别

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

  9. $(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法

    $(document).ready和window.onload的区别 $(document).ready和window.onload都是在都是在页面加载完执行的函数,大多数情况下差别不大,但也是有区别 ...

随机推荐

  1. Windows 使用技巧

    怎样添加“发送到”的快捷方式,cmd里面shell:sendto打开文件夹,把快捷方式放进去就可以了. vs中c#快速实现接口所有函数快捷键: 鼠标放在实现的接口上面+shift+alt+F10.

  2. pg limit限制返回的行

    limit 20:返回结果集中的前20行 offset 20 limit 20:返回结果集中前40行中的后20行 示例: 创建测试表: postgres=# create table test_lim ...

  3. MFC中控制Tips的显示 - lingyun1120

    from:  http://www.cnblogs.com/lingyun1120/archive/2011/11/09/2243279.html MFC中为ToolTips生成了一个类CToolTi ...

  4. python学习之面向对象（上）

    定义了一个Animal类,该类包括了构造函数,私有方法,公有方法,静态方法,属性的方问等 双下划线"__"组成了私有成员的定义约束,其它情况则为公有成员 #_metaclass_= ...

  5. 【JD的一人戏】之"小羊踢足球"第一篇

    好多次加班后坐的士回家,副驾驶座位后内嵌的显示屏正好在播放一个美食节目,内容就是一个着装怪异的厨子把各种食材分门别类地摆在你面前,然后用小小的锅碗瓢盆慢慢的做出很精致的够一个人吃的分量的各种美食,做好 ...

  6. 数据结构之最小生成树Kruskal算法

    1. 克鲁斯卡算法介绍 克鲁斯卡尔(Kruskal)算法,是用来求加权连通图的最小生成树的算法. 基本思想:按照权值从小到大的顺序选择n-1条边,并保证这n-1条边不构成回路. 具体做法:首先构造一个 ...

  7. kali视频（21-25）学习

    第六周 kali视频(21-25)学习 21.密码攻击之在线攻击工具 22.密码攻击之离线攻击工具(一) 23.密码攻击之离线攻击工具(二) 24.密码攻击之哈希传递攻击 25.无线安全分析工具 21 ...

  8. python3 tesserocr 安装 来解决部分爬虫遇到的字符识别问题

    1. OCR OCR,即Optical Character Recognition,光学字符识别,是指通过扫描字符,然后通过其形状将其翻译成电子文本的过程.对于图形验证码来说,它们都是一些不规则的字符 ...

  9. ArcGIS破解配置及oracle文件配置

    1.破解配置 2.oracle文件配置

  10. 异常：org.springframework.http.converter.HttpMessageNotReadableException

    spring(springboot.springmvc)出现标题的异常一般是由于controller的入参失败引起的. 介绍下常规入参的两种格式: ,这种方式的入参主要是接受key-value的参数, ...