DOMContentLoaded、readystatechange 和 load的知识梳理？

DOMContentLoaded

• DOMContentLoaded 事件在页面的 HTML 文档被完全 加载 和 解析 后触发，不依赖于外部资源（如图片、样式表等）的加载完成。
• DOMContentLoaded 事件通常用于在页面的 DOM 结构就绪后执行一些 JavaScript 操作，而无需等待其他资源加载完成

load

• load 事件在整个页面及其所有资源（包括图片、样式表、脚本等）都已加载 完成后触发
• load 事件通常用于执行需要等待页面和所有资源加载完成后才能执行的操作，比如启动动画效果等。

readystatechange

• readystatechange 事件可以用于实时检测页面加载状态的变化，并根据不同状态执行相应的操作
• 状态

1. loading：文档正在加载中。
2. interactive：文档已经完成解析，但是某些资源（例如图片和样式表）仍在加载中。
3. complete：文档已经完全加载完成，所有资源都已就绪。

使用方法

document.addEventListener('readystatechange', function() {
  if (document.readyState === 'complete') {
    // 当文档加载完成时执行特定操作
    console.log('Document is fully loaded.');
  }
});