页面加载时触发的事件及顺序
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了页面加载时触发的事件及顺序，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2320字，纯文字阅读大概需要4分钟。
内容图文
前言
页面加载时，大致可以分为以下几个步骤：
开始解析HTML文档结构
加载外部样式表及JavaScript脚本
解析执行JavaScript脚本
DOM树渲染完成
加载未完成的外部资源（如 图片）
页面加载成功
那么在这整个过程中触发了哪些常用的事件呢？
document readystatechange事件
readyState 属性描述了文档的加载状态，在整个加载过程中 document.readyState会不断变化，每次变化都会触发readystatechange事件。
readyState 有以下状态：
loading / 加载document 仍在加载。
interactive / 互动文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete / 完成T文档和所有子资源已完成加载。状态表示 load 事件即将被触发。
比如说在步骤2的时候对应 interactive 步骤5之后对应complete ，都会触发readystatechange事件。
PS:文档，图片等加载时的readyState 和 XMLHttpRequest.readyState 是不一样的。要注意区分
document DOMContentLoaded事件
DOM树渲染完成时触发DOMContentLoaded事件，此时可能外部资源还在加载。 jquery中的ready事件就是同样的效果
window load事件
所有的资源全部加载完成会触发window 的 load事件。
doucment 的load事件无法触发，但是MDN上却有这个事件？求大神指导！！！
实例
<h1>测试页面加载时，事件触发次序</h1>
<img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
<h1>测试页面加载时，事件触发次序</h1>
<img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt="">
<h1>测试页面加载时，事件触发次序</h1>
<script type="text/javascript">
console.log('resolve body JavaScript');
window.addEventListener('load',function(){
console.log('window load');
})
document.addEventListener('readystatechange',function(){
console.log('document ' + document.readyState);
})
document.addEventListener('DOMContentLoaded',function(){
console.log('document DOMContentLoaded');
}) //document 没有load事件?? document.addEventListener('load',function(){
console.log('document load');
}) </script>在chrome中的日志输出如下：
resolve body JavaScript --> document interactive --> document DOMContentLoaded --> document complete --> window load
完全符合预期有木有。所以在只需要文档结构加载完成就可以执行的脚本，可以监听DOMContentLoaded ；需要所有内容都加载完成才能执行的脚本，要监听window.onload 或者 document.readyState === 'complete'。
以上就是页面加载时触发的事件及顺序 的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的页面加载时触发的事件及顺序全部内容，希望文章能够帮你解决页面加载时触发的事件及顺序所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。