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. Python爬虫--抓取糗事百科段子

    今天使用python爬虫实现了自动抓取糗事百科的段子,因为糗事百科不需要登录,抓取比较简单.程序每按一次回车输出一条段子,代码参考了 http://cuiqingcai.com/990.html 但该 ...

  2. MFC多语言程序版本，在不同的windows系统上的使用 FP_SetThreadUILanguage

    from: http://www.cnblogs.com/qijicxl/p/3840157.html 如何使MFC程序界面支持多国语言?这次使用后给自己做一个总结. 我们使用vc6.0的版本来试验 ...

  3. Proposition

    提供 \(k\) 个变量 \((k\leq 4)\) 可独立取值为 \(0,1\),两种运算分别等价于 \(\neg a\) 和 \(\neg a \lor b\) . 你需要恰好使用 \(n\) 个 ...

  4. Jar包进行反编译，修改后重新打包

    在学习和开发JAVA项目中,我们经常会用到第三方提供的一些jar.使用这些第三方工具包,可以提高我们开发的效率,缩短开发的时间.有的第三方工具,提供具体的使用说明和源代码,有时有的却不提供源代码,使用 ...

  5. ArcGIS Runtime SDK for WPF之测量距离和面积

    bu不多说,上代码 using System.Windows; using ESRI.ArcGIS.Client; using ESRI.ArcGIS.Client.Tasks; using ESRI ...

  6. 微软白板Excel xls列号数字转字母

    Excel xls列号数字转字母 https://blog.csdn.net/lf124/article/details/53432817?utm_source=itdadao&utm_med ...

  7. SharedPreference作用及数据操作模式

    SharedPreference是Android平台上的一个轻量级的存储类,用来保存应用的一些常用配制,比如Activity状态,Activtiy暂停,将此Activity的状态保存到SharedPr ...

  8. MAC OS X常用命令总结

    附录:UNIX常用命令 ============================================================================ 1.  cd     ...

  9. RecyclerView 初体验

    网上看了很多 RecyclerView 的教程,也结合学长的代码,终于实现了一个不错看的过去的List 可以通过左滑删除Item 长按Item或者点击按钮,可以对Item进行拖拽 更具体的内容会写在代 ...

  10. Windows下安装Object C开发环境，及Hello Word(转)

    Windows下安装Object C开发环境,及Hello Word 最近想学习iphone开发,但是由于没有c基础,只有java基础.所以先从基础学习,首先是搭建环境,目前手头没有mac机子,只能先 ...