如何检测页面加载完成

偏执的太偏执、 2022-02-19 18:15 368阅读 0赞

# document.readyState #

#### 1.定义 ####

一个[`document`][document] 的 **document.readyState** 属性描述了文档的加载状态。

#### 2.值 ####

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

*  loading / 加载
    
    [`document`][document] 仍在加载。
 *  interactive / 互动
    
    文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
 *  complete / 完成
    
    文档和所有子资源已完成加载。状态表示 `load` 事件即将被触发。

当这个属性的值变化时，[`document`][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][https_blog.csdn.net_suwu150_article_details_78930068]

[document]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document
[https_blog.csdn.net_suwu150_article_details_78930068]: https://blog.csdn.net/suwu150/article/details/78930068