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

Question

我有一个用户单击的按钮，它会提交表单并在提交时重新加载页面。我想检查页面的重新加载是否完成。我尝试使用下面的方法，但它会在提交表单后甚至在加载完成之前立即发出警报。if(window.performance.navigation.type == 0){     alert('loaded'); }如何检查加载是否完成。提前致谢！

Answer 1

DOMContentLoaded 和 Load对于此目的很有用

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属性可用于检查文档是否准备就绪。来自 MDN：

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

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

您可以使用下面的代码。

  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!

    });

 }

Answer 2

您可以利用onreadystatechange事件并检查document readyState. 如果readyState有值complete则显示警报。

当文档的 ReadyState 属性发生更改时，会触发 ReadyStateChange 事件

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

例子：

document.onreadystatechange = () => {

  if (document.readyState === 'complete') {

     alert('loaded');

  }

};

Answer 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