纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

时间:2022-06-01 16:59:17

JavaScript与页面加载相关的事件

先介绍JavaScript与页面加载相关的几个事件:

document.readystatechange

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

  • loading:文档正在加载
  • interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。
  • complete:文档以及文档里包含的子资源都已经完成加载,这是会触发load事件。

示例:

switch (document.readyState) {
  case "loading":
    console.log("文档正在加载...");
    break;
  case "interactive":
    console.log("文档已加载完成,可以操作DOM元素")
    break;
  case "complete":
    // 页面已完成加载,包括css,图片等
    console.log("第一个css规则为: " + document.styleSheets[0].cssRules[0].cssText);
    break;
}

DOMContentLoaded

当html文档加载完(但不包括页面内嵌的图片,css,iframe)且已经完成解析,这时就会除非DOMContentLoaded事件,这等同于readyState的interactive状态。

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM文档已加载完成");
  });

等同于使用onreadystatechange事件

document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    console.log("DOM文档已加载完成");

  }
}

load

当文档以及文档包含的子资源完成加载后,就会触发load事件,这是在readyState变为complete值后触发。

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

等同于

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

实现监控页面的加载

了解完页面相关的加载事件后,使用纯Javascript来检测页面是否已经加载完成:

window.onload = function () { alert("It's loaded!") }

或:

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

或:

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