jQuery中ready与load事件的区别

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

jQuery中ready与load事件的区别

 

 

概述:

大家在工作中用jQuery的时候一定会在使用之前这样:
1
2
3
4
5
6
7
8
//document ready
$(document).ready(function(){
    ...code...
})
//document ready 简写
$(function(){
    ...code...
})
有些时候也会这么写:
1
2
3
4
//document load
$(document).load(function(){
    ...code...
})
一个是ready一个是load,这两个到底有什么区别呢?今天我们来聊一聊。

ready与load谁先执行:

大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答案是ready先执行,load后执行。

DOM文档加载的步骤:

要想理解为什么ready先执行,load后执行就要先聊一下DOM文档加载的步骤:
1
2
3
4
5
6
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load
从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了。但是load要在第(6)步完成之后才执行。

ready事件:

ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。

load事件:

load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。

总结:

相信大家已经了解了ready与load的区别,其实如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready。

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452081.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络爬虫--4.requests的简单实用

文章目录一.简介二.基本GET请求1.最基本的GET请求--直接用get方法2.添加 headers 和查询参数parmas3.通过requests获取网络上图片的大小三.基本POST请求1.传入data数据四.代理(proxies参数)五.私密代理六.web客户端验证七.Cookies 和 Sission1.Cookies2.…

编程各类资源大放送

小编的公众号[编程软文]一直在运营着,但是我的公众号只是发一些技术类文章,没有特地为自己的公众号如何添粉去操作,目前公众号关注度比较低。看着其他人的公众号粉丝越来越多,小编也需要为自己做些事。为了提高自己公众号的关注度…

使用Spring框架能带来那些好处?

1、Dependency Injection(DI)方法使得构造器和JavaBean properties文件中的依赖关系一目了然。2、与EJB容器相比较,Ioc容器更加趋向于轻量级。这样一来Ioc容器在邮箱的内存和CPU资源的情况下进行应用程序的开发和发布就变得十分有利。3、Spring并没有闭门造车&#…

谁在告谁?移动专利混战图

移动领域激战正酣,同样是没有永远的朋友,只有永远的利益。 苹果刚刚起诉三星的Galaxy手机和平板电脑山寨了苹果的产品,而此前两家并没有过节。再比如微软和亚马逊以及HTC之间的授权协议争端。移动领域的争端如此之多,以至于看客无…

java中list()和listfile()

File fnew File("c:\\");String[] f1f.list();File[] f2f.listFiles();① list() 返回一个字符串数组,这些字符串指定此抽象路径名表示的目录中的文件和目录。 以C盘为例,返回的是c盘下文件夹名字的字符串数组,如[TEMP, Windows]②listFile…

光棍节程序员闯关秀过关全攻略

maven/java/web/bootstrapQQ群:566862629。希望更多人一起帮助我学习。 光棍节程序员闯关秀过关全攻略。程序员的寂寞谁能懂?"SF光棍节程序员闯关秀"智力挑战小游戏火热上线,看看你能闯到第几关? 游戏地址: http://segmentfault…

jekins搭建

2019独角兽企业重金招聘Python工程师标准>>> 转自 https://www.cnblogs.com/hdwang/p/6081994.html ============&#xf…

网络爬虫--5.urllib库的基本使用(1)

文章目录一. 前言二. urlopen三. Request四. User-Agent五. 添加更多的Header信息1. 添加一个特定的header2. 随机添加/修改User-Agent一. 前言 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地。 在Python中有很多库可以用来…

高性能计算

信息时代的硬件芯片和存储器价格以摩尔定律的形式下降,可是现在处理的数据量也越来越大。我们先以cocoa编程为例,然后再结合网格计算、云计算,综合对最新的高性能计算技术作介绍。 使用 runloop 在cocoa编程如果用NSThread开线程 [NSThread …

混合型面向对象语言和纯面向对象语言

20世纪80年代以来,面向对象语言像雨后春笋一样大量涌现,形成了两大类面向对象语言。 一类是纯面向对象语言,如Smalltalk和Eiffel等语言 另一类是混合型面向对象语言,也就是在过程语言的基础上增加面向对象机制,如C等…

块级元素的margin-left和margin-right的用法注意

此时是有效果显示的因为html文档流默认是从上往下,从左往右进行显示的,所以此时是有效果的。那如果此时把#son的块元素的margin-right:20px; 是没有效果的此时是没有效果的,如图所示:如果此时想要margin-right有效果的话&#xf…

Apache Tiles的基本使用

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 1、概述 对于一个新的技术,了解其基本的概念和和原理是学好该技术的基础。 2、Tiles的概念 Tiles 是复合视图模式&#xff0…

js--------1.时间

1 //获取当前时间 yyyy-MM-dd2 function getNowFormatDate() {3 var date new Date();4 var seperator1 "-";5 var seperator2 ":";6 var month date.getMonth() 1;7 var strDate date.getDate();8 if (month > 1 &&…

网络爬虫--6.urllib库的基本使用(2)

文章目录一. urllib.parse.urlencode()和urllib.parse.unquote()二. Get方式三. 批量爬取百度贴吧数据四.POST方式五.关于CA六.处理HTTPS请求 SSL证书验证一. urllib.parse.urlencode()和urllib.parse.unquote() 编码工作使用urllib.parse的urlencode()函数,帮我们…

面向对象语言的技术特点

1.支持类与对象概念的机制 所有面向对象语言都允许用户动态创建对象,并且可以用指针引用动态创建的对象。允许动态创建对象,就意味着系统必须处理内存管理问题,如果不及时释放不再需要的对象所占用的内存,动态存储分配就有可能耗…

INI 文件的操作

在程序中经常要用到设置或者其他少量数据的存盘,以便程序在下一次执行的时候可以使用,比如说保存本次程序执行时窗口的位置、大小、一些用户设置的数据等等,在 Dos 下编程的时候,我们一般自己产生一个文件,由自己把这些…

摩拜大数据杀熟?官方:老用户押金的确退款延迟

近日,有媒体曝出摩拜单车一些老用户出现押金难退现象。有的消费者点击退款后,系统不断奔溃;有的申请退款后,账户又莫名出现押金,就像未申请一样;也有人终于提交了退款,等候数日却迟迟不见到账。…

Junit Test使用样例

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。 配置: 调用类: import java.util.List;import javax.annotation.Resource;import org.apache.shiro.crypto.Rand…

Django congtent types应用

contenttypes 是Django内置的一个应用,可以追踪项目中所有app和model的对应关系,并记录在ContentType表中。 每当我们创建了新的model并执行数据库迁移后,ContentType表中就会自动新增一条记录。比如我在应用app01的models.py中创建表class E…

网络爬虫--7.Handler处理器 和 自定义Opener

文章目录一. 引言二. 简单的自定义opener()三. ProxyHandler处理器(代理设置)四. Cookie1.Cookie原理2.Cookie应用五. cookiejar库 和 HTTPCookieProcessor处理器1.案例一:获取Cookie,并保存到CookieJar()对象中2.案例二:利用cook…