发布于 5年前
纯JavaScript检测页面是否加载完成（理解JavaScript页面加载事件）
JavaScript与页面加载相关的事件
先介绍JavaScript与页面加载相关的几个事件：
document.readystatechange
readystatechage事件会监控document.readyState。readyState有三个值：
- loading：文档正在加载
- interactive：文档已加载完成且已被解析，但子资源（如image，css，iframe等）仍在加载。
- complete：文档以及文档里包含的子资源都已经完成加载，这是会触发load事件。
示例：
switch (document.readyState) {
case "loading":
console.log("文档正在加载...");
break;
case "interactive":
console.log("文档已加载完成，可以操作DOM元素")
break;
case "complete":
// 页面已完成加载，包括css，图片等
console.log("第一个css规则为： " + document.styleSheets[0].cssRules[0].cssText);
break;
}
DOMContentLoaded
当html文档加载完（但不包括页面内嵌的图片，css，iframe）且已经完成解析，这时就会除非DOMContentLoaded事件，这等同于readyState的interactive状态。
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM文档已加载完成");
});
等同于使用onreadystatechange事件
document.onreadystatechange = function () {
if (document.readyState === "interactive") {
console.log("DOM文档已加载完成");
}
}
load
当文档以及文档包含的子资源完成加载后，就会触发load事件，这是在readyState变为complete值后触发。
window.addEventListener("load", function(event) {
console.log("文档以及它包含的资源都已加载完成");
});
等同于
document.onreadystatechange = function () {
if (document.readyState === "complete") {
console.log("文档以及它包含的资源都已加载完成");
}
}
实现监控页面的加载
了解完页面相关的加载事件后，使用纯Javascript来检测页面是否已经加载完成：
window.onload = function () { alert("It's loaded!") }
或：
window.addEventListener("load", function(event) {
console.log("文档以及它包含的资源都已加载完成");
});
或：
document.onreadystatechange = function () {
if (document.readyState === "complete") {
console.log("文档以及它包含的资源都已加载完成");
}
}
