页面加载的事件

Document.readyState 属性描述了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;
        }

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

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

        document.addEventListener('DOMContentLoaded', (event) => {
            console.log("DOMContentLoaded"); // 译者注："DOM完全加载以及解析"
        });

        window.addEventListener('load', (event) => {
            console.log("load");
        });

结果：

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

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

模拟 load 事件：

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