在浏览器地址栏输入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的区别的更多相关文章

  1. DOM加载过程

    静态的dom   动态的dom             http://blog.csdn.net/cxiaokai/article/details/7552653     一:预编译   解释 js加 ...

  2. css3实现loading效果--当页面加载过程中显示Loading的进度条,全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  3. iOS学习之视图加载过程中会触发的方法(loadView/viewDidLoad/didReceiveMemoryWarning)

    1.loadView 这是视图控制器用来加载根视图的方法; 如果需要将自定义的视图作为根视图,则不需要调用父类对该方法的实现([super loadView]);直接将自定义视图通过self.view ...

  4. spring加载过程中jar包加载不了,解决方法

    当我们在开发spring项目时,一般会将jar包放到webInf/lib下,这样是myeclipse自动将jar包加载到tomcat中webapps下,但是当我们新建一个lib文件夹的情况下,我们ad ...

  5. WPF 大数据加载过程中的等待效果——圆圈转动

    大家肯定遇到过或将要遇到加载大数据的时候,如果出现长时间的空白等待,一般人的概念会是:难道卡死了? 作为一个懂技术的挨踢技术,即使你明知道数据量太大正在加载,但是假如看不到任何动静,自己觉得还是一种很 ...

  6. 在程序加载过程中显示ProgressDialog 对话框

    private ProgressDialog mProgressDlg = null; @Override protected void onCreate(Bundle savedInstanceSt ...

  7. jQuery中ready和load的区别

    <span style="white-space:pre">        </span>//document ready $(document).read ...

  8. 输入 URL 到页面完成加载过程中的所有发生的事情?

    转到浏览器中输入URL给你一个页面后,.有些事情,你每天都在使用,学的是计算机网络知道是怎么回事.DNS解析然后页面的回馈,只是要讲好还是有难度. 之前fex团队的nwind专门写过这个问题的博客: ...

  9. linux 内核驱动加载过程中 向文件系统中的文件进行读写操作

    utils.h 文件: #ifndef __UTILS_H__ #define __UTILS_H__ void a2f(const char *s, ...); #endif utils.c 文件: ...

随机推荐

  1. mac下生成ssh keys 并上传github仓储

    使用github仓储需要本机生成一个公钥key 添加到自己的git账户SSH keys中   mac 生成方法:   1. 打开终端 输入   ssh-keygen 然后系统提示输入文件保存位置等信息 ...

  2. 一个无限加载瀑布流jquery实现

    实现大概是下面的效果,写了比较详细的注释 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  3. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  4. 札记:Java异常处理

    异常概述 程序在运行中总会面临一些"意外"情况,良好的代码需要对它们进行预防和处理.大致来说,这些意外情况分三类: 交互输入 用户以非预期的方式使用程序,比如非法输入,不正当的操作 ...

  5. Hadoop单机模式配置

    Required Software 1. 安装Java环境推荐的版本在链接中有介绍HadoopJavaVersions. 2. 安装ssh以使用hadoop脚本管理远程Hadoop daemons. ...

  6. MVVM大比拼之vue.js源码精析

    VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多来自knockout.angularj ...

  7. CSS3变形记(上):千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

  8. 零基础在线制作Windows Phone 8 应用

    任何用户(不管你是否会编程),只要你有浏览器,都可以使用 Windows Phone App Studio (下文中用App Studio指代) 快速制作出一个属于你的Windows Phone的应用 ...

  9. ABP源码分析四:Configuration

    核心模块的配置 Configuration是ABP中设计比较巧妙的地方.其通过AbpStartupConfiguration,Castle的依赖注入,Dictionary对象和扩展方法很巧妙的实现了配 ...

  10. ABP源码分析二十五:EventBus

    IEventData/EventData: 封装了EventData信息,触发event的源对象和时间 IEventBus/EventBus: 定义和实现了了一系列注册,注销和触发事件处理函数的方法. ...