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 文件: ...
随机推荐
- mac下生成ssh keys 并上传github仓储
使用github仓储需要本机生成一个公钥key 添加到自己的git账户SSH keys中 mac 生成方法: 1. 打开终端 输入 ssh-keygen 然后系统提示输入文件保存位置等信息 ...
- 一个无限加载瀑布流jquery实现
实现大概是下面的效果,写了比较详细的注释 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
- css样式让input垂直居中
css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...
- 札记：Java异常处理
异常概述 程序在运行中总会面临一些"意外"情况,良好的代码需要对它们进行预防和处理.大致来说,这些意外情况分三类: 交互输入 用户以非预期的方式使用程序,比如非法输入,不正当的操作 ...
- Hadoop单机模式配置
Required Software 1. 安装Java环境推荐的版本在链接中有介绍HadoopJavaVersions. 2. 安装ssh以使用hadoop脚本管理远程Hadoop daemons. ...
- MVVM大比拼之vue.js源码精析
VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多来自knockout.angularj ...
- CSS3变形记(上)：千变万化的Div
传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...
- 零基础在线制作Windows Phone 8 应用
任何用户(不管你是否会编程),只要你有浏览器,都可以使用 Windows Phone App Studio (下文中用App Studio指代) 快速制作出一个属于你的Windows Phone的应用 ...
- ABP源码分析四：Configuration
核心模块的配置 Configuration是ABP中设计比较巧妙的地方.其通过AbpStartupConfiguration,Castle的依赖注入,Dictionary对象和扩展方法很巧妙的实现了配 ...
- ABP源码分析二十五：EventBus
IEventData/EventData: 封装了EventData信息,触发event的源对象和时间 IEventBus/EventBus: 定义和实现了了一系列注册,注销和触发事件处理函数的方法. ...