Блог

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

Мне нужна как можно более простая функция, готовая к использованию на чистом JavaScript, которая запускается при полной загрузке страницы, аналогичная функции jQuery $(document).ready() .

Я продолжаю находить этот пример:

 if (document.readyState === "complete" || (document.readyState !== "loading" amp;amp; !document.documentElement.doScroll)) {
    // Document already fully loaded
    ready();
} else {
    // Add event listener for DOMContentLoaded (fires when document is fully loaded)
    document.addEventListener("DOMContentLoaded", ready);
}

function ready() {
    // Handler here
}
  

но веб-сайты, приводящие этот пример, всегда говорят о поддержке более старых версий IE, а мне это не нужно. Я хочу поддерживать только современные браузеры (Chromium Edge, Chrome, Firefox, Opera и Safari) и надеюсь найти более простое решение, особенно в части document.readyState !== "loading" amp;amp; !document.documentElement.doScroll . Кажется, я не могу найти много информации о document.documentElement.doScroll , по крайней мере, не из надежных источников, таких как MDN, поэтому я не знаю точно, что он делает, или если удаление этого может привести к сбою функции ready в определенных крайних случаях.

Я думаю, что я спрашиваю вот о чем:

Безопасно ли удалять document.readyState !== "loading" amp;amp; !document.documentElement.doScroll из примера кода, и есть ли еще лучшие способы сделать это сейчас, когда вас интересуют только текущие основные браузеры (перечисленные выше)?

Похоже, что doScroll — это работа с IE. Проверка readyState полезна, поскольку событие DOMContentLoaded не сработает, если оно уже произошло. Итак, если вам не нужна поддержка IE, я бы сказал, что вы можете удалить проверку doScroll, оставив вам:

 if (document.readyState === "complete") {
    // Document already fully loaded
    ready();
} else {
    // Add event listener for DOMContentLoaded (fires when document is fully loaded)
    document.addEventListener("DOMContentLoaded", ready);
}

function ready() {
    // Handler here
}