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("文檔以及它包含的資源都已加載完成");
}
}