Как проверить, завершена ли перезагрузка страницы - PullRequest
Новая
       7

Как проверить, завершена ли перезагрузка страницы

3 голосов
/ 20 марта 2020

У меня есть кнопка, которую пользователь нажимает, и она отправляет форму, и страница перезагружается при отправке. Я хочу проверить, завершена ли перезагрузка страницы. Я попытался использовать приведенную ниже, но это дает предупреждение сразу после отправки формы, даже до того, как загрузка была закончена. 

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

Как я могу проверить, завершена ли загрузка. Заранее спасибо!

Ответы [ 3 ]

3 голосов
/ 20 марта 2020

DOMContentLoaded и Load полезны для этой цели ( link )

DOMContentLoaded - браузер полностью загружен HTML, а дерево DOM встроенные, но внешние ресурсы, такие как изображения и таблицы стилей, могут быть еще не загружены.

load - загружается не только HTML, но и все внешние ресурсы: изображения, стили и т. Д. c.

Load следует использовать только для обнаружения полностью загруженная страница Распространенной ошибкой является использование 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}`);
   };

По вашему вопросу вы хотите проверить после отправки формы. Поэтому, когда форма отправляется, окно перезагружается и вся do c перезагружается.

Также вы можете использовать document.readyState , чтобы проверить, загружены документы полностью или нет.

Свойство document.readyState Может использоваться для проверки готовности документа. От MDN:

Значения ReadyState документа может быть одним из следующих:

loading - Документ все еще загружается. интерактивный - документ завершил загрузку, и документ был проанализирован, но подресурсы, такие как изображения, таблицы стилей и фреймы, все еще загружаются. complete - документ и все подресурсы завершили загрузку. Состояние указывает, что событие загрузки вот-вот сработает.

Вы можете использовать следующий код. 

    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!
    });
 }
2 голосов
/ 20 марта 2020

Вы можете использовать событие onreadystatechange и проверить document readyState. Если readyState имеет значение complete, отобразите предупреждение.

Событие readystatechange вызывается при изменении атрибута readyState документа

или просто загружается код javascript в конце тела.

Пример: 

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
     alert('loaded');
  }
};
1 голос
/ 20 марта 2020

Вы можете использовать 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

...