如何检查页面重新加载是不是完成

Posted 2023-02-22

【中文标题】如何检查页面重新加载是不是完成

【英文标题】：How to check if page reload is finished如何检查页面重新加载是否完成

【发布时间】：2020-07-01 04:49:03

【问题描述】：

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

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

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

【参考方案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.offsetWidthx$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");
;

<button onclick="location.reload()">Reload</button>

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