页面加载时触发的事件及顺序
前言
页面加载时,大致可以分为以下几个步骤:
开始解析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'。
以上就是页面加载时触发的事件及顺序 的详细内容,更多请关注其它相关文章!
上一篇: html页面跳转传递参数时常见问题
下一篇: 有关图形组合的文章推荐10篇
推荐阅读
-
Selenium一些特殊情况的处理:失去焦点、点击不生效、长页面处理、先触发事件才能动态加载的元素、日期输入
-
Asp.NET页面中事件加载的先后顺序详解
-
Javascript代码在页面加载时的执行顺序介绍_基础知识
-
Asp.NET页面事件加载的顺序是什么样的
-
关闭页面时window.location事件未执行的原因分析及解决方案_javascript技巧
-
页面加载时触发的事件及顺序
-
Selenium一些特殊情况的处理:失去焦点、点击不生效、长页面处理、先触发事件才能动态加载的元素、日期输入
-
Asp.NET页面事件加载的顺序是什么样的
-
关闭页面时window.location事件未执行的原因分析及解决方案_javascript技巧
-
页面加载时触发的事件及顺序