Как узнать, было ли уже запущено событие загрузки окна

Я пишу сценарий Javascript. Этот скрипт, вероятно, будет загружен асинхронно (в формате AMD).

В этом сценарии я бы не хотел делать ничего важного, пока не сработало событие window.load. Поэтому я слушаю окно "загрузить" событие.

Но если скрипт загружается после события window.load... как я могу узнать, что window.load уже запущен?

И, конечно, я не хочу добавлять что-либо в другие скрипты (все они загружаются асинхронно, проблема одна и та же) :)

Изменить:

Представьте себе HTML-документ без Javascript вообще.

Чем кто-то вставит в этот документ тег, и этот тег скрипта загрузит мой файл Javascript.

Это выполнит мой сценарий.

Как этот сценарий может узнать, запущен ли уже window.load?

Никакого jQuery, ни одного скрипта в HTML-документе до моего.

Можно ли узнать??

Я нашел свойство window.document.readystate. Это свойство предназначено для события "готово" документа, а не для окна "загрузить". Есть ли что-нибудь похожее для окна "загрузка" события?

Ответы

Ответ 1

Браузер производительность навигации показатель loadEventEnd можно использовать для определения того, было ли инициировано событие загрузки:

let navData = window.performance.getEntriesByType("navigation");
if (navData.length > 0 && navData[0].loadEventEnd > 0)
{
    console.log('Document is loaded');
} else {
    console.log('Document is not loaded');
}

Ответ 3

Быстрый ответ

Чтобы быстро ответить на заголовок вопроса:

document.readyState === 'complete'

Более глубокий пример

Ниже приведен полезный помощник, если вы хотите вызывать код при загрузке окна, но при этом обрабатывает случай, когда окно может уже загружаться к моменту запуска вашего кода.

function winLoad(callback) {
  if (document.readyState === 'complete') {
    callback();
  } else {
    window.addEventListener("load", callback);
  }
}

winLoad(function() {
  console.log('Window is loaded');
});

Ответ 4

Вот мой ответ:

fiddle

window.addEventListener("load", function () {
    window.loaded = true;
});

function logLoaded() {
    console.log("loaded");
}

(function listen () {
    if (window.loaded) {
        logLoaded();
    } else {
        console.log("notLoaded");
        window.setTimeout(listen, 50);
    }
})();

Вы можете прочитать о addEventListener() и его совместимости (это новая спецификация ECMAScript 5) здесь. Это новый "предпочтительный" способ сделать что-то в будущем.

Вы можете прочитать о высказываниях с немедленной выдержкой (IIFE) (поочередно, самозависимые анонимные функции или сразу же вызванные анонимные функции) здесь.

EDIT: Вот хороший ответ уже на StackOverflow:

Как проверить, готова ли DOM без рамки?

Если вы специально хотите узнать, запущено ли событие загрузки DOM, установите глобальную переменную в обработчик события DOM "load", а затем проверьте его существование при загрузке нового кода.

// in 'load' event handler
window.domLoadEventFired = true;

// in code you are loading asynchronously
if (typeof window.domLoadEventFired !== undefined) {
    // ...
}

Ответ 5

Если вы не хотите использовать jQuery, используемая логика:

if( !document.body )
    setTimeout( checkAgain, 1 );

Итак, между событием, загруженным окнами, и проверкой наличия свойства body документа, вы можете проверить, готова ли DOM

Ответ 6

Основываясь на подходе @CTS_AE, я собрал решение для среды, где:

  • window.addEventListener('load', activateMyFunction); и
  • window.addEventListener('DOMContentLoaded', activateMyFunction);

не работает.

Требуется замена одного символа (например, из

window.addEventListener('load', activateMyFunction);

в

window_addEventListener('load', activateMyFunction);)

Функция window_addEventListener() выглядит следующим образом:

const window_addEventListener = (eventName, callback, useCapture = false) => {

  if ((document.readyState === 'interactive') || (document.readyState === 'complete'))   {

    callback();
  }
}

Ответ 7

как насчет переопределения window.load?

window._load = window.load;
window.load = function(){
  window.loaded = true;
  window._load();
}

Затем проверьте

if (window.loaded != undefined && window.loaded == true){
    //do stuff
}