JS监听document是否加载完成

跨浏览器且纯JavaScript检测document是否加载完成的方法是使用

if (document.readyState === 'complete') {
  // 页面已完全加载
}

这样可以在document完全加载时监测到

let stateCheck = setInterval(() => {
  if (document.readyState === 'complete') {
    clearInterval(stateCheck);
    console.log('document 加载完成');
    //...
  }
}, 100);

或者使用 onreadystatechange

document.onreadystatechange = () => {
  console.log(document.readyState);
  if (document.readyState === 'complete') {
    console.log('document 加载完成');
    //...
  }
};

readyState 传回的值有以下可能

0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。
1-LOADING：加载程序进行中，但文件尚未开始解析。
2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。
3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是>有效但只读的。
4-COMPLETED：文件已完全加载，代表加载成功。