文档章节

jQuery中ready与load事件的区别总结

双月通天
 双月通天
发布于 2015/06/15 19:28
字数 490
阅读 60
收藏 0

大家在工作中用jQuery的时候一定会在使用之前这样:

//document ready
$(document).ready(function(){
    ...code...
})

//document ready 简写
$(function(){
    ...code...
})

有些时候也会这么写:

//document load
$(document).load(function(){
    ...code...
})

一个是ready一个是load,这两个到底有什么区别呢?今天我们来聊一聊。

ready与load谁先执行:

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

DOM文档加载的步骤:

要想理解为什么ready先执行,load后执行就要先聊一下DOM文档加载的步骤:

(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。


© 著作权归作者所有

共有 人打赏支持
双月通天
粉丝 39
博文 278
码字总数 218751
作品 0
徐汇
程序员
私信 提问
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
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() 与window.onload的区别

jquery $(document).ready() 与window.onload的区别作者: 字体:[增加 减小] 类型:转载 Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onlo...

wangwenya
2014/05/08
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0
jQuery内ready与load事件的区别[转]

我之所以转载这篇文章,是因为我前两天在写http://hi.baidu.com/see7di/blog/item/c2ba78601de67c5deaf8f8e9.html这个的时候曾经碰到过ready与load的问题.所以转载过来看一下. 在前面小节中曾...

小囧
2011/08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MySQL主从配置——双主

MySQL主从配置——双主 本人是测试环境,准备了两台安装好mysql的服务器(masterA和masterB),可以保证没数据写入,否则需要先将两台服务器上的数据一致,然后再进行主从配置,步骤是:先m...

弓正
30分钟前
9
0
centos下如何使用 beyond compare 对比工具

我这里的环境是centos7桌面版 三条命令安装beyond compare wget http://www.scootersoftware.com/bcompare-4.2.3.22587.x86_64.rpmrpm --import http://www.scootersoftware.com/RPM-GPG-K......

linuxprobe16
34分钟前
6
0
http协议请求头的意义

GET /day31_Http_306/index.jsp HTTP/1.1: GET请求,请求服务器路径为/hello/index.jsp,协议为1.1 请求头 1.Host:localhost:请求的主机名为localhost2.User-Agent:Mozilla/5.0(Windows NT......

潇潇程序缘
今天
9
0
Netty 简单服务器 (三)

经过对Netty的基础认识,设计模型的初步了解,来写个测试,试试手感 上篇也说到官方推荐我们使用主从线程池模型,那就选择这个模型进行操作 需要操作的步骤: 需要构建两个主从线程组 写一个服务器...

_大侠__
今天
19
0
day02:管道符、shell及环境变量

1、管道符:"|" 用于将前一个指令的输出作为后一个指令的输入,且管道符后面跟的是命令(针对文档的操作):cat less head tail grep cut sort wc uniq tee tr split sed awk等) [root@localho...

芬野de博客
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部