[javascript]监听页面加载情况

document.readystatechange

readystatechage事件会监控document.readyState。readyState有三个值：

loading：文档正在加载

interactive：文档已加载完成且已被解析，但子资源（如image，css，iframe等）仍在加载。

complete：文档以及文档里包含的子资源都已经完成加载，这是会触发load事件。

if (document.readyState == "loading") {
    console.log("文档正在加载...");
}
document.onreadystatechange = function () {
    switch (document.readyState) {
        case "interactive":
            console.log("文档已加载完成，可以操作DOM元素")
            break;
        case "complete":
            console.log("页面已完成加载，包括css，图片等");
            break;
    }
}

DOMContentLoaded

为document添加DOMContentLoaded事件 ，等同于document.readyState的"interactive"。

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("文档已加载完成，可以操作DOM元素");
}); 

为window添加load事件，等同于document.readyState的"complete"。

window.addEventListener("load", function(event) {
    console.log("页面已完成加载，包括css，图片等");
}); 

监控加载完成方法

window.onload = function () {
    console.log("文档以及它包含的资源都已加载完成");
}

window.addEventListener("load", function(event) {
    console.log("文档以及它包含的资源都已加载完成");
});

document.onreadystatechange = function () {
    if (document.readyState === "complete") {
        console.log("文档以及它包含的资源都已加载完成");
    }
}

下一篇：[javascript]setInterval与setTimeout的分析
上一篇：[vue]router路由的使用