文档章节

$(document).ready()与$(window).load()的区别

huoyoung
 huoyoung
发布于 2016/06/17 10:19
字数 663
阅读 30
收藏 0

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

1.执行时间不同:

从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来了,这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了,但页面不一定加载完毕,如一些大的图片等,加载完成就需要一定的时间;但是页面加载完毕后,dom肯定也就建立起来了;但是有些文字或者图片链接等需要在文档加载完毕前,dom树建立后就进行的,这时就要用到$(document).ready()了。ready事件可以同时注册多个,执行时,按照注册的先后顺序执行。注意,就算是注册不同元素的ready事件,也是按照先后顺序执行。

2.可以被执行的次数不同:

$(document).ready()可以在JavaScript代码中出现多次,并且里面的函数或者代码都可以得到执行;而$(window).load()只能在JavaScript代码中出现一次,如果有多个$(window).load(),那么只有最后一个$(window).load()里面的函数或者代码才会执行,之前的$(window).load()都将被覆盖;

<script>
$(document).ready(function(){
  alert("document1");//这段代码会被执行
});
$(document).ready(function(){
  alert("document2");//这段代码会被执行
});
$(window).load(function(){
  alert("window1");//这段代码不会被执行
});
$(window).load(function(){
  alert("window2");//这段代码将被执行
});
</script>


3.执行的效率不同:
如要在dom的元素节点中添加onclick属性节点,这时用$(document).ready()就要比用$(window).load()的效率高;但是在某些时候还必须得用$(window).load()才行,如之前写的app下载,如果要关闭这个下载框,则必须要在整个下载框加载完毕后,才能点击关闭图标,对app下载框执行隐藏。

<script>
$(document).ready(function(){
  $(".add_btn").attr("onclick","alert('add...')");
});
$(window).load(function(){
  $(".close_btn").click(function(){
    $("#app_down").hide();
  });
});
</script>

© 著作权归作者所有

共有 人打赏支持
huoyoung
粉丝 1
博文 22
码字总数 13506
作品 0
浦东
私信 提问
$(document).ready();和$(window).load();的区别

1.执行时间不同: 从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来 了,这时就可以通过class属性或者id属性等等对dom进行...

issac宝华
2016/03/16
51
0
window.load 和$(document).ready() 区别

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

ke_ry
2016/08/26
0
0
jquery $(document).ready() 与window.onload的区别

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕...

_xiaotudou
2014/04/23
0
0
jQuery $(document).ready()和JavaScript onload事件详解区别

jQuery $(document).ready()和window.onload   根据ready()方法的API说明http://api.jquery.com/ready/   这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a...

X_H
2015/10/12
46
0
window.onload 与 $(document).ready() 区别

A Windows load event fires when all the content on your page is fully loaded including the DOM (document object model) content and asynchronous JavaScript, frames and images. Yo......

巨轮
2016/09/22
50
0

没有更多内容

加载失败,请刷新页面

加载更多

把iOS中block代码异步执行通过信号量变成同步执行

dispatch_semaphore_t semaphore = dispatch_semaphore_create(0); [self downZipFile:^(BOOL downSucceed) { dispatch_semaphore_signal(semaphore); }]; dispatch_semaphor......

壹峰
14分钟前
1
0
excel函数使用

拼接多个字段 =CONCATENATE(B2,C2,D2,E2) 通过函数把一个sheet里面的字段搂到另一个sheet F2 唯一匹配另一个sheet的字段。 www 另一个sheet的名称 H:I www这个sheet里面从H行到I行。 2 从第几...

贾峰uk
16分钟前
1
0
SpringBoot 集成 DBUnit 、database-rider与H2数据库进行单元测试

单元测试 什么是单元测试 参考维基百科: 单元测试(Unit Testing)又称为模块测试, 是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在...

Tree
17分钟前
0
0
java基础知识目录

java 注解

细节探索者
19分钟前
1
0
第一个网络爬虫

准备工作 http请求头概念 1、Accept :请求报头域,用于指定客户端可接受哪些类型的信息。 2、Accept-Language :指定客户端可接受的语言类型。 3、Accept-Encoding :指定客户端可接受的内容...

轻轻的往前走
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部