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

Question

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

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

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

Answer 1

您可以使用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

Answer 2

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

当文档的readyState属性更改时，将触发readystatechange事件

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

示例：

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

Answer 3

DOMContentLoaded and 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}`);
   };