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

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() {&nbsp; alert("loaded");};<button onclick="location.reload()">Reload</button>https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event