文档章节

jQuery中ready与load事件的区别

Yemon
 Yemon
发布于 2016/05/17 10:32
字数 501
阅读 2
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

1、摘要

大家在编程中使用jQuery还有JS的时候一定会在使用之前这样:

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

有时候也这样:

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

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

2、ready和load谁先执行:

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

3、dom文档加载步骤:

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

(1) 解析HTML结构。 
(2) 加载外部脚本和样式表文件。

(3) 解析并执行脚本代码。

(4) 构造HTML DOM模型。 //ready

(5) 加载图片等外部文件。

(6) 页面加载完毕。 //load

从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了。但是load要在第(6)步完成之后才执行。

4、关于ready事件:

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

5、关于load事件:

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

6、总结:

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

本文转载自:http://blog.csdn.net/hj7jay/article/details/51322300

Yemon
粉丝 10
博文 322
码字总数 23853
作品 0
广州
架构师
私信 提问
加载中

评论(0)

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

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

_xiaotudou
2014/04/23
4
0
前端 js 页面加载完成事件 - onload,五种写法

在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready...

osc_xgq4n4ik
04/16
2
0
JavaScript中页面加载完成后执行

在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready...

osc_96xykppu
2018/06/22
0
0
第78天:jQuery事件总结(一)

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

半指温柔乐
2017/11/08
0
0
js中页面加载完成后执行的几种方法及执行顺序

在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready...

osc_isezqdgg
2019/09/18
2
0

没有更多内容

加载失败,请刷新页面

加载更多

Python笔记:记pandas中几个好用的函数

pandas是python数据分析常用的库之一!从数据加载到预处理,从数据分析到可视化,pandas提供了一站式服务。而以下这几个聚合统计函数,更是好用! 本文主要讲解pandas中的7个聚合统计相关函数...

tengyulong
27分钟前
17
0
使用“ let”和“ var”有什么区别? - What's the difference between using “let” and “var”?

问题: ECMAScript 6 introduced the let statement . ECMAScript 6引入了let语句 。 I've heard it that it's described as a "local" variable, but I'm still not quite sure how it beh......

javail
今天
17
0
如何将文件重置或还原到特定版本? - How can I reset or revert a file to a specific revision?

问题: I have made some changes to a file which has been committed a few times as part of a group of files, but now want to reset/revert the changes on it back to a previous ver......

fyin1314
今天
24
0
OSChina 周五乱弹 —— 头发和不要头发,你总要选一个

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雾 缀じた街 ふたつのかげ》- Porkkana 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
49
0
一道 算法题 引发的 ‘xx现场’

请 熟悉的语言 去 验证 在输入框中输入的是否是一个正确的网址 初次读题萌新有点 不知所措的样子一查 MDN 吓一跳 ----- 一个不怎么熟悉的方法跳出眼边URL() 构造函数返回一个新创建的 ...

酒窝yun过去了
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部