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. Visual Studio和Sublime Text全系列激活码

    自己经常用,做个备份 VS2012 Microsoft Visual Studio Ultimate 2012 旗舰版 有效注册密钥: YKCW6-BPFPF-BT8C9-7DCTH-QXGWC Mi ...

  2. php 中的杂项函数

    1.$arr = range(1, 10);   print_r($arr); Array(    [0] => 1    [1] => 2    [2] => 3    [3] = ...

  3. make命令和makefile文件

    make命令和makefile文件的结合提供了一个在项目管理领域十分强大的工具,它不仅常被用于控制源代码的编译,而且还用于手册页的编写以及将应用程序安装到目标目录. makefile文件由一组依赖关系 ...

  4. bzoj 3124 直径

    Written with StackEdit. Description 小\(Q\)最近学习了一些图论知识.根据课本,有如下定义. 树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一 ...

  5. shh整合后web.xml、spring配置文件和struts.xml的内容

    1:web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=" ...

  6. LA4728 Squares

    题意 PDF 分析 就是求凸包点集的直径. 当然选择旋转卡壳. 然后是实现上的技巧: 当Area(p[u], p[u+1], p[v+1]) <= Area(p[u], p[u+1], p[v] ...

  7. phpstorm2017.3.6的激活、样式设置和汉化

    一:安装phpstorm2017.3.6,并激活.设置样式.(1)先在phstorm官网里www.jetbrains.com下载phpstorm2017.3.6,按照步骤安装即可.下面开始激活!(2) ...

  8. Notepad++如何取消打开最近的历史文件

    1.设置 2.首选项 3.备份 4.取消勾选 "Remember current session for next launch" 5.重新启动即可. 出处:http://www. ...

  9. php 日期时间运算比较

    $sql= "select * from t_datestudy where id='4750' and agreemode='2' and school_agree !='1'" ...

  10. spring mvc集成velocity使用

    目前流行的三大页面视图神器是:老牌大哥jsp.后起之秀freemarker和velocity.这里不详细比较这三者的优劣,总体来说,jsp是标配,但后面两个更严格的执行了视图与业务的分离,页面里是不允 ...