页面加载的事件

落日映苍穹つ 2022-12-17 11:53 226阅读 0赞

**`Document.readyState` **属性描述了[`document`][document] 的加载状态。所以要特别注意下面的两个事件“readystatechange”和“DOMContentLoaded”是通过document监听的；load事件是window的事件！

语法：返回的是三种状态字符串

var string = document.readyState;

一个文档的 `readyState` 可以是以下之一：

loading（正在加载）：document 仍在加载。
    
    interactive（可交互）：文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。
    
    complete（完成）：文档和所有子资源已完成加载。表示 load 状态的事件即将被触发。

readystatechange事件监听**`readyState值的变化：`**

document.onreadystatechange = function () {
                console.log(document.readyState)
            }

**`Document.readyState值对应页面加载状态和事件`**

switch (document.readyState) {
                case "loading":
                    // 表示文档还在加载中，即处于“正在加载”状态。
                    console.log("loading")
                    break;
                case "interactive":
                    // DOM元素可以被访问，但是像图像，样式表和框架等资源依然还在加载。
                    //所以是“可交互”，可以操作DOM
                    //对应DOMContentLoaded事件
                    console.log("interactive")
                    break;
                case "complete":
                    // 页面所有内容都已被完全加载.
                    // 对应load事件
                    console.log("complete");
                    break;
            }

同时监听这三个事件，看事件的执行顺序：

结果：

![20201023155238565.png][]

模拟 DOMContentLoaded事件或jQuery.ready()方法：

document.onreadystatechange = function () {
                if (document.readyState === "interactive") {
                    initApplication();
                }
            }

模拟 load 事件：

document.onreadystatechange = function () {
                if (document.readyState === "complete") {
                    initApplication();
                }
            }

[document]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document
[20201023155238565.png]: /images/20221122/0d3717e0e5e24a2cac4a395f93dc4b66.png