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

Question

我有一个按钮，用户点击后会提交表单并重新加载页面。我想检查页面重新加载是否完成。我尝试使用以下代码，但是它在加载完成之前就直接弹出了提示框。

```javascript $(window).on('load', function() { alert('Page has finished loading.'); }); ```

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

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

- user12814531

Answer 1

DOMContentLoaded和Load对于此目的非常有用(链接)

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

load - 不仅HTML已加载，而且所有外部资源也已加载：图片、样式等。

仅应使用Load来检测完全加载的页面。在适当的情况下，使用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可以是以下之一： loading-文档仍在加载中。 interactive-文档已完成加载并已解析，但子资源（如图像、样式表和框架）仍在加载中。 complete-文档和所有子资源都已完成加载。该状态表示load事件即将触发。

您可以使用以下代码。

    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!
    });
 }

- teddcp

---

我该如何将其绑定到按钮上，以便在单击按钮后检查加载情况？ - user12814531

Answer 2

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

当文档的 readyState 属性发生变化时，将触发 readystatechange 事件。

或者只需在 body 结束标签之前加载 JavaScript 代码。

示例：

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

- Sohail Ashraf

---

这个代码效果不错，但唯一的问题是，当我刷新或初次打开页面时也会触发弹窗提示。如何将其绑定到一个按钮上，使得只有在点击该按钮后才会触发？ - user12814531

您可以在 if 块中为按钮添加事件监听器。 - Sohail Ashraf

不要使用alert，而是添加事件监听器。 - Sohail Ashraf

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

- Kavelin