文档章节

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

huoyoung
 huoyoung
发布于 2016/06/17 10:19
字数 599
阅读 25
收藏 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
粉丝 0
博文 20
码字总数 11674
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

win32截屏并rgb24转yuv420

//最终f的内存布局为BGRA格式,需要保证buf长度足够(>w*h*4)void ScreenCap(void* buf, int w, int h){ HWND hDesk = GetDesktopWindow(); HDC hScreen = GetDC(hDesk); ......

styleman
49分钟前
1
0
php输出mysql取出的中文为??的问题

解决方法: @ $db=new mysqli(DB_HOST,DB_USER,DB_PASSWORD,DB_DB); $db->query("set names utf8");//添加此语句,可以解决问题...

Aomo
今天
1
2
白话SpringCloud | 第五章:服务容错保护(Hystrix)

前言 前一章节,我们知道了如何利用RestTemplate+Ribbon和Feign的方式进行服务的调用。在微服务架构中,一个服务可能会调用很多的其他微服务应用,虽然做了多集群部署,但可能还会存在诸如网...

oKong
今天
2
0
【解惑】领略Java内部类的“内部”

内部类有两种情况: (1) 在类中定义一个类(私有内部类,静态内部类) (2) 在方法中定义一个类(局部内部类,匿名内部类) 1、私有内部类 —— 在方法之间定义的内部类,非静态 我们首先看看类中...

偶尔诗文
今天
1
0
sqlserver 2008 r2 直接下载地址(百度云)

之前下载的sqlserver2008发现不能附加,就卸载了,重新找到了sqlserver2008R2的百度云资源 卸载sqlserver2008还是有点麻烦,不过就是需要删除注册表中的信息 自己来回卸载了3次终于重装sqlse...

dillonxiao
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部