DOMContentLoaded onreadstatechan
2018-10-19 本文已影响0人
monvhh
曾自己借助阿里云和hexo搭了个站点，现已废弃，过往写的博客暂挪到此处。
title: DOMContentLoaded onreadstatechange window.onload之间的区别？
date: 2016-12-09 11:14:37
tags:
- 技术
- js
因为调用document.onreadstatechange事件时也是要判断 readystate的值，所以根据readyState的值，按时间顺序展示如下：
| document.readyState | 对应的触发事件 | 哪个阶段？ |
|---|---|---|
| loading | document文档正在加载 | |
| interactive | DOMContentLoaded | 文档渲染结束但正在加载内嵌资源时 |
| complete | window.onload | 文档加载完成 |
其中，interactive和complete的具体区别，也就是触发windows.onload事件和document的DOMContentLoaded事件的区别是：
- DOMContentLoaded：HTML document加载及解析完成，包括script标签。不等待css渲染、图片、子frame加载完成。
- load：及等以上一切加载完成。
参考MDN文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState
那么什么时候只能用load事件，什么时候只能用DOMContentLoaded事件呢？
- 比如需要在初始化页面时获取图片像素的时候，只能用load事件。
- 其他还没想到。。。to be continued……
进阶资料 http://www.alloyteam.com/2014/03/effect-js-css-and-img-event-of-domcontentloaded/
