如何检查页面重新加载是否完成答案

【问题标题】：How to check if page reload is finished如何检查页面重新加载是否完成
【发布时间】：2020-07-01 04:49:03
【问题描述】：

我有一个用户单击的按钮，它会提交表单并在提交时重新加载页面。我想检查页面的重新加载是否完成。我尝试使用下面的但这会在表单提交后甚至在加载完成之前直接发出警报。

if(window.performance.navigation.type == 0){
    alert('loaded');
}

如何检查加载是否完成。提前致谢！

【问题讨论】：

标签： javascript html form-submit reload

【解决方案1】：

DOMContentLoaded 和 Load 可用于此目的 (link)

DOMContentLoaded – 浏览器完全加载 HTML，DOM 树是已构建，但图片和样式表等外部资源可能尚未加载。

load – 不仅加载了 HTML，还加载了所有外部资源：图片、样式等

Load 应该只用于检测完全加载的页面。在更适合 DOMContentLoaded 的地方使用 load 是一个常见的错误。

    window.addEventListener('DOMContentLoaded', (event) => {
        console.log('DOM fully loaded and parsed');
    });

   //===================

   window.onload = function() { 
    // same as window.addEventListener('load', (event) => {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
   };

根据您的问题，您希望在提交表单后进行检查。因此，当表单提交时，窗口会重新加载，整个文档也会重新加载。

您也可以使用 document.readyState 来检查文档是否已完全加载。

document.readyState property 可以用来检查文件是否准备好了。来自 MDN：

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

loading – 文档仍在加载中。交互式 - 文档已完成加载并且文档已被解析但图像、样式表和框架等子资源仍然存在加载。完成 - 文档和所有子资源已完成加载。该状态表示加载事件即将触发。

你可以使用下面的代码。

    if(document.readyState === "complete") {
    // Fully loaded!
    }
    else if(document.readyState === "interactive") {
         // DOM ready! Images, frames, and other subresources are still 
       downloading.
    }
    else {
       // Loading still in progress.
       // To wait for it to complete, add "DOMContentLoaded" or "load" 
         listeners.

    window.addEventListener("DOMContentLoaded", () => {
        // DOM ready! Images, frames, and other subresources are still 
        downloading.
    });

    window.addEventListener("load", () => {
        // Fully loaded!
    });
 }

【讨论】：

如何将其绑定到按钮，以便在单击按钮后检查加载？

【解决方案2】：

您可以使用onreadystatechange 事件并检查document readyState。如果readyState 的值为complete，则显示警报。

readystatechange 事件在文档的 readyState 属性发生变化时触发

或者只是在正文的末尾加载 javascript 代码。

例子：

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
     alert('loaded');
  }
};

【讨论】：

这个很好用，但唯一的问题是，当我刷新或第一次打开页面时，它也会发出警报。如何将其绑定到按钮，以便在单击按钮后它可以工作。
您可以在 if check 中为按钮添加事件监听器。
添加事件监听器而不是警报。

【解决方案3】：

你可以使用 window.onload:

window.onload = function() {
  alert("loaded");
};

&lt;button onclick="location.reload()"&gt;Reload&lt;/button&gt;

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

【讨论】：