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. Golang的接口

    当一只鸟走路像鸭子,游泳像鸭子,叫起来也像鸭子,那么我们就认为它就是鸭子. Duck typing 的理念因此比喻得名. Golang 通过 interface 实现 duck typing. Eff ...

  2. boost库做什么用呢？

    1.C++标准库不是已经很全面了吗?Boost又不是界面库,它主要解决些什么问题呢?哪类问题?2.Boost的开发人员都是C++标准委员会的吧,为什么没把它列做标准库,有什么不完善的问题吗? 3.Bo ...

  3. VMware Workstation/Fusion 14/15 密钥

    VMware WorkStation 14 CG54H-D8D0H-H8DHY-C6X7X-N2KG6 ZC3WK-AFXEK-488JP-A7MQX-XL8YF AC5XK-0ZD4H-088HP- ...

  4. 【学习】JennyHui学自动化测试

    学习材料:虫师的Python书,乙醇的教程 Selenium 常用的键盘事件 智能等待 处理富文本框 定位 界面数据与数据库数据对比 Excel操作 下载文件 Selenium 2.0 学习笔记 == ...

  5. 【ACM非算法部分】STL汇总

    stackqueuepriority_queuemapsetpair ====================================== stack:(栈) 包含:#include<s ...

  6. HihoCoder1621 : 超市规划（四边形DP优化）（）

    超市规划 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi居住的城市的中轴线恰好是一条马路.沿着这条马路一共坐落有N个居民小区,其中第i个小区距离马路一端的距离是A ...

  7. C++常量const

    常量折叠概念 常量折叠表面上的效果和宏替换是一样的,只是“效果上是一样的”,而两者真正的区别在于,宏是字符常量,在预编译宏替换完成后,该宏名字会消失,所有对宏的引用已经全部被替换为它所对应的值,编译器 ...

  8. Spring中的c3p0配置

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/51162560 今天,我们就来详细谈谈Spring中的c3p0配置问题,好了,不耽搁 ...

  9. Bean后置处理器 BeanPostProcessor

    1.BeanPostProcessor接口的作用 Bean后置处理器允许在调用初始化方法前后对Bean进行额外的处理,Bean后置处理器对IOC容器的所有bean实例逐一处理,而非单一实例. 我们可以 ...

  10. Linux 环境下安装Maven

    1.安装wget命令 如果需要通过使用wget命令,直接通过网络下载maven安装包时,需要在linux系统中安装wget命令. yum -y install wget 2.下载maven安装包 wg ...