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事件，也是按照先后顺序执行。例如下列代码：

代码如下:

$(window).ready(function(){
  alert("window");
});
$(document).ready(function(){
  alert("document");
});
$("div").ready(function(){
  alert("div");
});

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

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

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

赞 (0)

相关推荐

  • jquery $(document).ready() 与window.onload的区别

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

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onload没有简化写法          $(documen

  • 解析页面加载与js函数的执行 onload or ready

    首先,页面加载顺序:解析HTML结构.加载外部脚本和样式表文件.解析并执行脚本代码.构造HTML DOM模型.加载图片等外部文件.页面加载完毕. 也就是:html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img

  • 浅析document.ready和window.onload的区别讲解

    Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,这个问题在"javascript执行顺序里"http://www.jb51.net/article/44577.htm一文里有详细介绍. jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行.比如在"jQuery基础 - 如何开始"一文里,我用到如下jQuery代码: 复制代码 代码如下: <!--   $(document).ready(

  • jquery的$(document).ready()和onload的加载顺序

    最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件.改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉了. 起初以为是和本身onload加载的方法冲突.网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间

  • jquery中的$(document).ready()与window.onload的区别

    所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; } 解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQu

  • 一张表格告诉你windows.onload()与$(document).ready()的区别

    浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready()方法.下面介绍一下两者的区别.   window.onload() $(document).ready() 执行时机 在页面所有元素(包括图片,引用文件)加载完后执行. 页面中所有HTML DOM,CSS DOM结构加载完之后就会执行,其他图片可能没有加载完. 如果想要网页所有内容(包括图片等)

  • JQ中$(window).load和$(document).ready区别与执行顺序

    JQ中的$(document).ready()大家应该用的非常多,基本每个JS脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数$(window).load相对出现的次数就很少了,下面为大家介绍一下两者的区别与他们的执行顺序 一般情况下一个页面响应加载的基本顺序是:域名解析 -> 加载html -> 加载js和css -> 加载图片等其他信息. 那么我们在编写JS脚本时什么情况下使用$(document).ready()又在什么情况下使用$(window).load呢,我们先

  • JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r

  • JQuery onload、ready概念介绍及使用方法

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法 复制代码 代码如下: $(function(){ // do something }); 其实这个就是jq ready

  • jQuery中document与window以及load与ready 区别详解

    jQuery中document与window以及load与ready 区别详解

    用过JavaScript的童鞋,应该知道window对象和document对象,也应该听说过load事件和ready事件,小菜当然也知道,而且自认为很了解,直到最近出了问题,才知道事情并不是那么简单. 首先说说window和document,直观上来讲,window代表的是浏览器窗口,而document代表的是浏览器窗口中加载的dom元素,进一步说,document是window的一个属性,window是最顶级的对象. 二者有啥区别呢?很好理解,假设现在有一个浏览器,里边加载的页面特别长,已经超

  • jQuery中each()、find()和filter()等节点操作方法详解(推荐)

    1.each(callback) 官方解释: 返回值:jQuery 概述 以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型). 返回 'false' 将停止循环 (就像在普通的循环中使用 'break').返回 'true' 跳至下一个循环(就像在普通的循环中使用'

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • 对pandas中两种数据类型Series和DataFrame的区别详解

    1. Series相当于数组numpy.array类似 s1=pd.Series([1,2,4,6,7,2]) s2=pd.Series([4,3,1,57,8],index=['a','b','c','d','e']) print s2 obj1=s2.values # print obj1 obj2=s2.index # print obj2 # print s2[s2>4] # print s2['b'] 1.Series 它是有索引,如果我们未指定索引,则是以数字自动生成. 下面是一些例

  • 对python中 math模块下 atan 和 atan2的区别详解

    atan 和 atan2 都是反正切函数,返回的都是弧度 对于两点形成的直线,两点分别是 point(x1,y1) 和 point(x2,y2),其斜率对应角度的计算方法可以是: angle = atan( (y2-y1)/(x2-x1) ) 或 angle = atan2( y2-y1, x2-x1 ) 因此可以看出 atan 和 atan2 的区别: 1.参数的个数不同:atan 为单个参数,atan2为两个参数 2.atan2 的优点在于: 如果 x2-x1等于0 ,角度依然可以计算,但是

  • 对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解

    在用tensorflow做一维的卷积神经网络的时候会遇到tf.nn.conv1d和layers.conv1d这两个函数,但是这两个函数有什么区别呢,通过计算得到一些规律. 1.关于tf.nn.conv1d的解释,以下是Tensor Flow中关于tf.nn.conv1d的API注解: Computes a 1-D convolution given 3-D input and filter tensors. Given an input tensor of shape [batch, in_wi

  • python中urllib.request和requests的使用及区别详解

    urllib.request 我们都知道,urlopen()方法能发起最基本对的请求发起,但仅仅这些在我们的实际应用中一般都是不够的,可能我们需要加入headers之类的参数,那需要用功能更为强大的Request类来构建了 在不需要任何其他参数配置的时候,可直接通过urlopen()方法来发起一个简单的web请求 发起一个简单的请求 import urllib.request url='https://www.douban.com' webPage=urllib.request.urlopen(

  • Python中的None与 NULL(即空字符)的区别详解

    1.首先要了解Python的对象的概念: Python中,万物皆对象,所有的操作都是针对对象的,那什么是对象,5是一个int对象,'oblong'是一个str对象,异常也是一个对象,抽象一点是,人,猫,够也是一个对象 那对于一个对象,它就有包括两方面的特征:  属性:去描述它的特征  方法: 它所具有的行为 所以,对象=属性+方法 (其实方法也是一种属性,一种区别于数据属性的可调用属性 把具有相同属性和方法的对象就可以归为一类,即Classl.类就好比是一张蓝图,使用一个类可以创建多个对象实例

  • C#中托管DLL和非托管DLL的区别详解

    首先解释一下,托管DLL和非托管DLL的区别.狭义解释讲,托管DLL就在Dotnet环境生成的DLL文件.非托管DLL不是在Dotnet环境生成的DLL文件. 托管DLL文件,可以在Dotnet环境通过 "添加引用" 的方式,直接把托管DLL文件添加到项目中.然后通过 Using DLL命 名空间,来调用相应的DLL对象 .  非托管DLL文件,在Dotnet环境应用时,通过 DllImport 调用. C# 调用非托管DLL文件.DLL文件是用C语言编写的. 托管DLL就是能够在公共

  • nginx配置proxy_pass中url末尾带/与不带/的区别详解

    nginx配置proxy_pass时url末尾带"/"与不带"/"的区别如下: 注意:当location为正则表达式匹配模式时,proxy_pass中的url末尾是不允许有"/"的,因此正则表达式匹配模式不在讨论范围内.  proxy_pass配置中url末尾带/时,nginx转发时,会将原uri去除location匹配表达式后的内容拼接在proxy_pass中url之后. 测试地址:http://192.168.171.129/test/tes

随机推荐