javascript监控页面加载情况

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("文档以及它包含的资源都已加载完成");
  }
}