Question

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

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

如何检查加载是否完成。预先感谢！

Answer 1

DOMContentLoaded和Load 可用于此目的（link）

DOMContentLoaded –浏览器已完全加载HTML，而DOM树是内置，但外部资源（如图片和样式表）可能尚未加载。

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

加载应仅用于检测已满的页面。在DOMContentLoaded更合适的地方使用负载是一个常见的错误。

    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：

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

futile.logger

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

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

3 个答案: