纯JavaScript检测页面是否加载完成(理解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("文档以及它包含的资源都已加载完成");
  }
}

版权声明:著作权归作者所有。

相关推荐

Javascript检测开发者工具Devtools是否打开(Chrome/Firefox/IE)

首先要确定一点:是没有统一标准的方法来检测各个浏览器的devtools是否打开。所以只能针对不同的浏览器使用不同的方案,当然随着浏览器能的升级,有可能目前的方案也是会不适用的。这里列出目前各个浏览器可用的方案。方案一console.log隐式调用元素的idfunction isDevToolsOpened() {  var opened = fal

PC端禁止页面缩放(原生JavaScript)

在PC端缩放浏览器的页面主要有三种方式:Ctrl + (+/-)组合Ctrl + 鼠标轮滑浏览器菜单我们是禁止不了用户通过浏览器缩放页面,只能通过对有键盘或鼠标事件的快捷方式做监控,从而实现禁止缩放的快捷方式。禁止Ctrl + (+/-)组合document.addEventListener('keydown', functio

JavaScript跳转页面的方法及区别

JavaScript跳转页面主要有三种方法:1、location.replacelocation.replace会替换当前页面的history,这意味着不能使用后退按钮回退replace前的页面。window.location.replace("https://majing.io"); 有点类似模拟http请求的重定向2、location.assignlocation.assi

JavaScript:给动态元素绑定事件

JavaScript给动态添加的元素绑定事件有几种方式:方法一:jQuery使用jQuery.fn.on可以很简单为动态元素绑定事件:$(staticAncestors).on(eventName, dynamicChild, function() {}); staticAncestors:静态的祖先元素选择器eventName:事件名,如click等dynamicC

使用pace.js在页面顶部添加加载进度条

很多网站(如Github,Stackoverflow)在加载页面时,页面的顶部会看到页面加载进度条。使用pace.js可以很简单的实现此功能。下载pace.jspace官网下载:http://github.hubspot.com/pace/docs/welcome/(包含主题介绍)Github下载:https://github.com/HubSpot/pace完整zip包:http://githu