DOMContentLoaded、load、beforeunload、unload
HTML 页面的生命周期包含三个重要事件：
DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。
load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
beforeunload/unload —— 当用户正在离开页面时。
每个事件都是有用的：
- DOMContentLoaded 事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。
- load 事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。
- beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
- unload 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。
具体用法：DOMContentLoaded
DOMContentLoaded 事件发生在 document 对象上。使用 addEventListener 来捕获它
<!doctype html> | |
<body> | |
<script> | |
function ready() { | |
alert('DOM is ready'); | |
// 图片目前尚未加载完成（除非已经被缓存），所以图片的大小为 0x0 | |
alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`); | |
} | |
document.addEventListener("DOMContentLoaded", ready); | |
</script> | |
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0"> | |
</body> |
window.onload
当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。
<!doctype html> | |
<body> | |
<script> | |
window.onload = function() { // 与此相同 window.addEventListener('load', (event) => { | |
alert('Page loaded'); | |
// 此时图片已经加载完成 | |
alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`); | |
}; | |
</script> | |
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0"> | |
</body> |
window.unload
当访问者离开页面时，window 对象上的 unload 事件就会被触发。我们可以在那里做一些不涉及延迟的操作，例如关闭相关的弹出窗口。
我们希望通过 unload 事件将数据保存到我们的服务器上。
有一个特殊的 navigator.sendBeacon (url, data) 方法可以满足这种需求
let analyticsData = { /* 带有收集的数据的对象 */ }; | |
window.addEventListener("unload", function() { | |
navigator.sendBeacon("/analytics", JSON.stringify(analyticsData)); | |
}); |
- 请求以 post 发送
- 不仅客服发送字符串，还可以发送表单格式
- 数据大小限制在 64kb
window.beforeunload
如果我们要取消事件，浏览器会询问用户是否确定。
window.onbeforeunload = function() { | |
return false; | |
}; |
readyState
在某些情况下，我们不确定文档是否已经准备就绪
document.readyState 属性可以为我们提供当前加载状态的信息。
它有 3 个可能值：
- loading —— 文档正在被加载。
- interactive —— 文档被全部读取。
- complete —— 文档被全部读取，并且所有资源（例如图片等）都已加载完成。
function work() { /*...*/ } | |
if (document.readyState == 'loading') { | |
// 仍在加载，等待事件 | |
document.addEventListener('DOMContentLoaded', work); | |
} else { | |
// DOM 已就绪！ | |
work(); | |
} |
readystatechange
会在状态发生改变时触发，因此我们可以打印所有这些状态
<!DOCTYPE html> | |
<script> | |
"use strict"; | |
// 当前状态 | |
console.log(document.readyState); | |
// 状态改变时打印它 | |
document.addEventListener('readystatechange', () => console.log(document.readyState)); | |
</script> |
这是一个带有 <iframe> ， <img> 和记录事件的处理程序的文档：
<script> | |
log('initial readyState:' + document.readyState); | |
document.addEventListener('readystatechange', () => log('readyState:' + document.readyState)); | |
document.addEventListener('DOMContentLoaded', () => log('DOMContentLoaded')); | |
window.onload = () => log('window onload'); | |
</script> | |
<iframe src="iframe.html" onload="log('iframe onload')"></iframe> | |
<img src="http://en.js.cx/clipart/train.gif" id="img"> | |
<script> | |
img.onload = () => log('img onload'); | |
</script> |
方括号中的数字表示发生这种情况的大致时间。标有相同数字的事件几乎是同时发生的（± 几毫秒）。
- 在 DOMContentLoaded 之前，document.readyState 会立即变成 interactive。它们俩的意义实际上是相同的。
- 当所有资源（iframe 和 img）都加载完成后，document.readyState 变成 complete。这里我们可以发现，它与 img.onload（img 是最后一个资源）和 window.onload 几乎同时发生。转换到 complete 状态的意义与 window.onload 相同。区别在于 window.onload 始终在所有其他 load 处理程序之后运行。
