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 文件: ...
随机推荐
- Android 添加ActionBar Buttons
一.在res/menu文件夹下创建Xml文件 跟标签为menu,设置item <?xml version="1.0" encoding="utf-8"?& ...
- MySQL ALTER命令
当我们需要修改数据表名或者修改数据表字段时,就需要使用到MySQL ALTER命令. 开始本文教程前让我们先创建一张表,表名为:testalter_tbl. root@host# mysql -u r ...
- Linux-Rhel6 恢复误删文件
需要工具extundelete(可通过xshell上传下载到linux)知识点:ifconifig eth0 查看ipfdisk /dev/sda 管理磁盘m ...
- svnserver hook python
在使用中可能会遇到的错误排除 :1.Error: svn: 解析"D:\www\test"出错,或svn: E020024: Error resolving case of 'D: ...
- Windows 7 上安装Visual Studio 2015 失败解决方案
安装之前先要看看自己的系统支不支持,具体的可以看:https://www.visualstudio.com/en-us/visual-studio-2015-system-requirements-v ...
- Kinect开发文章目录
整理了一下去年为止到现在写的和翻译的Kinect的相关文章,方便大家查看.另外,最近京东上微软在搞活动, 微软 Kinect for Windows 京东十周年专供礼包 ,如果您想从事Kinect开发 ...
- CanvasWebgl项目介绍
CanvasWebgl 介绍 CanvasWebgl 是一个基于webgl 开发的2d绘图框架,使用TypeScript开发 CanvasWebgl的功能,是在屏幕空间 或者 3D空间产生一个画布 ...
- [Intel Edison开发板] 02、Edison开发板入门
一.前言 Start from the link: 开始学习的链接 上面链接是官网的教程,按照教程可以开发板入门: 其中第一步是了解开发板,涉及到如何组装.如何连线.一些主要的接口简单介绍等信息: 第 ...
- Android Toolbar 开发总结
初识 Toolbar Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Android ...
- backup1：开始数据库备份
数据库备份分为数据文件备份和日志文件备份,数据文件的备份分为:完整备份和差异备份.在SQL Server 2012中,能够将数据分布式备份到不同的存储设备上,一般情况,只将数据备份到一个备份文件(.b ...