DOM加载过程中ready和load的区别
在浏览器地址栏输入URL地址，浏览器开始加载页面时，有以下几个过程
1、浏览器开始解析HTML文档
2、 浏览器遇到HTML文档中的<script>元素以及CSS样式文件，并且没有async或defer属性，就暂停解析，开始执行脚本和CSS样式
3、 HTML文档解析完成
4、 浏览器等待图片、样式表、字体文件等外部资源加载完成
在这其中，有两个阶段：
ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；
load，表示页面包含图片等外部文件在内的所有元素都加载完成。
DOM Ready
严格来说，ready并不是DOM中的事件，只是因为在jQuery中，有ready()方法，它在页面HTML文档解析完成但图片等媒体文件加载完成之前执行。
使用jQuery插件一般都这么写
$(function(){
//do something
alert('something finished！')
});
其实这个就是jQuery ready()的简写，他等价于
$(document).ready(function(){
//do something
alert('something finished！')
})
这个jQuery ready()的方法就是DOM Ready ，他的作用就是，在DOM加载完成后，图片等外部文件加载之前，就可以对DOM进行操作。
在不使用jQuery的情况下，可以使用DOMContentLoaded事件可以判断DOM的ready状态。
document.addEventListener('DOMContentLoaded', function () {
//do something
alert('something finished！')
});
它表示在document节点上监听DOMContentLoaded事件，一旦document中的DOM完成加载就触发此事件。
IE8不支持DOMContentLoaded事件，因此在较低版本的浏览器中，可以使用 readystatechange事件，效果是一样的。
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
//do something
alert('something finished！')
}}
其中，document.readyState属性返回当前文档的状态，共有三种可能的值。
- loading：加载HTML代码阶段（尚未完成解析）
- interactive：加载外部资源阶段时
- complete：加载完成时
Dom Load
DOM在完全加载完成之后会触发load事件，此时如果想做点事情的话，可以这么写
window.onload=function(){
//do something
alert('something finished！')
}
注意，不要写成document.onload，因为在大多数浏览器中，在document上监听load事件是无效的，应当在window上监听。
使用jQuery的写法
$(window).load(function(){
//do something
alert('something finished！')
})
这就是Dom Load，他的作用就是，在DOM以及其中的图片等其他外部文件全部加载完毕之后触发。
考虑一下下面的代码在执行时，会先弹出哪个窗口。
<script>
window.onload=function(){
alert('load finished！')
}
document.addEventListener('DOMContentLoaded',function(){
alert('ready finished！')
})
</script>
<body>
<h1>这是一个 JavaScript 测试程序</h1>
</body>
参考：
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
https://www.w3.org/TR/html5/syntax.html#the-end
JavaScript标准参考教程http://javascript.ruanyifeng.com/dom/document.html
DOM加载过程中ready和load的区别的更多相关文章
- DOM加载过程
静态的dom 动态的dom http://blog.csdn.net/cxiaokai/article/details/7552653 一:预编译 解释 js加 ...
- css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失
一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
- iOS学习之视图加载过程中会触发的方法(loadView/viewDidLoad/didReceiveMemoryWarning)
1.loadView 这是视图控制器用来加载根视图的方法; 如果需要将自定义的视图作为根视图,则不需要调用父类对该方法的实现([super loadView]);直接将自定义视图通过self.view ...
- spring加载过程中jar包加载不了，解决方法
当我们在开发spring项目时,一般会将jar包放到webInf/lib下,这样是myeclipse自动将jar包加载到tomcat中webapps下,但是当我们新建一个lib文件夹的情况下,我们ad ...
- WPF 大数据加载过程中的等待效果——圆圈转动
大家肯定遇到过或将要遇到加载大数据的时候,如果出现长时间的空白等待,一般人的概念会是:难道卡死了? 作为一个懂技术的挨踢技术,即使你明知道数据量太大正在加载,但是假如看不到任何动静,自己觉得还是一种很 ...
- 在程序加载过程中显示ProgressDialog 对话框
private ProgressDialog mProgressDlg = null; @Override protected void onCreate(Bundle savedInstanceSt ...
- jQuery中ready和load的区别
<span style="white-space:pre"> </span>//document ready $(document).read ...
- 输入 URL 到页面完成加载过程中的所有发生的事情？
转到浏览器中输入URL给你一个页面后,.有些事情,你每天都在使用,学的是计算机网络知道是怎么回事.DNS解析然后页面的回馈,只是要讲好还是有难度. 之前fex团队的nwind专门写过这个问题的博客: ...
- linux 内核驱动加载过程中 向文件系统中的文件进行读写操作
utils.h 文件: #ifndef __UTILS_H__ #define __UTILS_H__ void a2f(const char *s, ...); #endif utils.c 文件: ...
随机推荐
- SEED实验系列文章目录
美国雪城大学SEEDLabs实验列表 SEEDLabs是一套完整的信息安全实验,涵盖本科信息安全教学中的大部分基本原理.项目组2002年由杜文亮教授创建,目前开发了30个实验,几百所大学已采用.实验楼 ...
- 《Ansible权威指南》笔记（2）——Inventory配置
四.Inventory配置ansible通过Inventory来定义主机和组,使用时通过-i指定读取,默认/etc/ansible/hosts.可以存在多个Inventory,支持动态生成.1.定义主 ...
- Linux系统中用DNW向ARM开发板下载程序
在Linux下通过dnw来给开发板发送程序.包括驱动程序代码:secbulk.c,应用程序代码:dnw.c.只能运行在32位系统上,在64位系统上提示错误:DNW download Data size ...
- jQuery.data() 使用方法
data() 方法向被选元素附加数据,或者从被选元素获取数据.在实际开发中,可以用来记录上一步操作某一对象的值,来给下一步操作做一些判断 $("#btn1").click(func ...
- DDD中的Unitwork与DomainEvent如何相容？(续)
上篇中说到了面临的问题(传送门:DDD设计中的Unitwork与DomainEvent如何相容?),和当时实现的一个解决方案.在实际使用了几天后,有了新的思路,和@trunks 兄提出的观点类似.下面 ...
- EQueue文件持久化消息关键点设计思路
要持久化的关键数据有三种 消息: 队列,队列中存放的是消息索引信息,即消息在文件中的物理位置(messageOffset)和在队列中的逻辑位置(queueOffset)的映射信息: 队列消费进度,表示 ...
- ABP(现代ASP.NET样板开发框架)系列之14、ABP领域层——领域事件（Domain events）
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之14.ABP领域层——领域事件(Domain events) ABP是“ASP.NET Boilerplate P ...
- 3.Kali 1.0 / 2.0 安装中文输入法（谷歌pinyin + 其他）
1.kali默认是没有中午输入法的,需要自己安装一下 2.首先我们先获取root权限 dnt@HackerKali:~$ su密码: 3.安装中文输入法(apt-get 指令不会的同学可以学习一下基础 ...
- 【Win10应用开发】签名与验证
对数据进行签名和验证,是为了防止数据被“盗版”.比较常规的做法是通过公钥进行验证. 算法上多用SAH_xxxx,就是哈希算法.由于MD5后来被发现存在“非唯一性”,你会发现现在很多一些下载的文件验证都 ...
- ubuntu 14.04LTS 环境下配置NFS服务
简言之,NFS(Network FileSystem,网络文件系统)用于在不同机器,不同操作系统之间通过网络互相分享各自的文件.NFS设计之初就是为了在不同的系统间使用,所以它的通讯协议设计与主机及操 ...