在浏览器地址栏输入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. 直播推流端弱网优化策略 | 直播 SDK 性能优化实践

    弱网优化的场景 网络直播行业经过一年多的快速发展,衍生出了各种各样的玩法.最早的网络直播是主播坐在 PC 前,安装好专业的直播设备(如摄像头和麦克风),然后才能开始直播.后来随着手机性能的提升和直播技 ...

  2. Java 教程整理：基础、项目全都有

    Java 在编程语言排行榜中一直位列前排,可知 Java 语言的受欢迎程度了. 网上有很多 Java 教程,无论是基础入门还是开发小项目的教程都比比皆是,可是系统的很少,对于Java 学习者来说找到系 ...

  3. 【微信SEO】公众号也能做排名？

    [写于2016年8月] 最近,微信团队发出一则公告,开放公众号运营者一年内更改公众号名一次,这对不少名字起的奇葩名字(包括dkplus)的公众号来说是一件好事. 为什么说是好事呢?公众号名字直接关联到 ...

  4. MyEclipse对Maven的安装

    好记性不如烂笔头,记录一下. 操作系统:windows 7 MyEclipse2015 JDK1.7 maven的下载链接,点这里下载apache-maven-3.0.4-bin.tar.gz. 下载 ...

  5. webpack搭建前端一条龙服务

    作为从grunt.gulp一路走来的老码农,一开始用webpack的时候我是很抗拒的.但由于核心库使用了vue,而webpack又是vue的最佳拍档(vue作者专门为其写了vue-loader),所以 ...

  6. ABP(现代ASP.NET样板开发框架)系列之16、ABP应用层——数据传输对象（DTOs）

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之16.ABP应用层——数据传输对象(DTOs) ABP是“ASP.NET Boilerplate Project ...

  7. iOS中数据库应用基础

    iOS 数据库入门 一.数据库简介 1.什么是数据库? 数据库(Database) 是按照数据结构来组织,存储和管理数据的仓库 数据库可以分为2大种类 关系型数据库(主流) PC端 Oracle My ...

  8. atitit 商业项目常用模块技术知识点 v3 qc29

    atitit 商业项目常用模块技术知识点 v3 qc29 条码二维码barcodebarcode 条码二维码qrcodeqrcode 条码二维码dm码生成与识别 条码二维码pdf147码 条码二维码z ...

  9. jQuery 根据值或者文本选中select

    今天因为有项目需要动态操作select选中 习惯在百度上搜了一下 ,结果还是挺多的.试了其中一个 发现不能使用.打开第2,3 个发现都是一样的然后自己稍微研究了一下 //初始化select,第一个选中 ...

  10. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...