如何检测页面加载完成

Posted suwu150

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何检测页面加载完成相关的知识,希望对你有一定的参考价值。

document.readyState

1.定义

一个documentdocument.readyState 属性描述了文档的加载状态。

2.值

一个文档的 readyState 可以是以下值之一:

  • loading / 加载

    document 仍在加载。

  • interactive / 互动

    文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。

  • complete / 完成

    文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

当这个属性的值变化时,document 对象上的readystatechange 事件将被触发。

3.语法

let string = document.readyState;

// "complete"

4.具体使用

可以通过各个状态进行不同的操作

switch (document.readyState) 
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading.
    // We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    let CSS_rule = document.styleSheets[0].cssRules[0].cssText;
    console.log(`The first CSS rule is: $CSS_rule `);
    break;

同时也能够进行模拟其他操作状态

// 模拟 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () 
  if (document.readyState === "interactive") 
    initApplication();
  

// 模拟 load/onload 事件
document.onreadystatechange = function () 
  if (document.readyState === "complete") 
    initApplication();
  

在下面看一个实际应用中的例子,就是平时我们在加载页面的时候,都会要求在显示页面之前会有一个提示界面,在页面加载完成之后,移除掉这个现实界面,我们就可以按照下面的做法去实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
    .loadpagediv 
      display:none;
      position:absolute;
      top:30%;
      left:40%;
      width:25%;
      height:10%;
      background-color:green;
      border:10px solid blue;
      color:red;
    
  </style>
  <script>
    var id = setTimeout('loadPage()',100);
    function loadPage() 
      // 取得文档载入状态,如果载入完成,则readystate='complete'
      // 根据这个可以定时去获取文档载入状态,来实现页面载入等待效果
      var readystate = document.readyState.toLowerCase();
      if (readystate === 'complete')
      
        clearTimeout(id);
        document.getElementById('loadpagediv').style.display =  "none";
      
      else 
        document.getElementById('loadpagediv').style.display =  "block";
        id = setTimeout('loadPage()',100);
      

    
  </script>
</head>

<body>
<div id="loadpagediv" class="loadpagediv">
  正在加载页面...
</div>
</body>
<iframe src="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState" style="position:absolute;top:200px;left:200px;width:400px;height:200px;">

</iframe>
</html>

document.onreadystatechange

1.概述

当一个文档的 readyState 属性发生更改时,readystatechange 事件会被触发。

2.语法

document.onreadystatechange = funcRef;

funcRef 是个函数引用,会在readystatechange事件触发时调用.

3.例子

/*
interactive / 互动
文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState
*/
// 模拟DOMContentLoaded事件
document.onreadystatechange = function () 
    if (document.readyState === "interactive") 
        initApplication();
    

window.onload 事件

1.定义

load事件通常用于检测文档内容或者图片是否加载完毕。

该方法用于在网页加载完毕后立刻执行的操作,即当html加载完毕后,立刻执行某个方法等。

2.为什么使用window.onload()?

因为JS中的函数方法等需要在HTML文档渲染完成才可以使用,如果没有渲染完成,此时的DOM树是不完整的,这样JS文件就可能报出"undefined"错误。

3.常见的用法:

简单的立刻执行函数,假设一个js中只有一个需要页面加载后,立刻执行的函数

那直接调用,不需要加括号

window.Func;

假设一个js中有多个需要页面加载后,立刻执行的函数,那就如下调用即可,需要加括号

window.function()
	Func1();
	Func2();
	Func3();
...


但,以上方式也仅仅适用于绑定的函数不是很多的场合

具体可参见:https://blog.csdn.net/suwu150/article/details/78930068

以上是关于如何检测页面加载完成的主要内容,如果未能解决你的问题,请参考以下文章

如何在页面加载时调用 JavaScript 函数?

如何在 AMX 页面加载时调用 Javascript 函数?

怎么在页面加载时调用action中的方法

在Blazor中如何在页面加载(事件名称)时调用函数?

检测 WebBrowser 完整页面加载

使用浏览器后退按钮时如何强制重新加载页面?