ready-state.md

Проверка загрузки страницы и готовности DOM

Многие библиотеки дают вам возможность отложить выполнения кода до окончания загрузки страницы. Например, в jQuery это можно реализовать следующим образом:

$(document).ready(function() {
  // Код внутри этой функции выполнится после загрузки страницы
});

Или более которткий вариант:

$(function() {
  // Код внутри этой функции выполнится после загрузки страницы
});

Подробнее о методе ready можно узнать в документации.

Реализовать подобное с помощью нативного JavaScript настолько же просто, как и при работе с jQuery. Достаточно использовать событие readystatechange объекта document и свойство readyState:

// Чтобы узнать состояние загрузки страницы используйте свойство обекта document readyState
if (document.readyState === 'complete') {
  // Этот код сработает, если страница полностью загружена
}

// Для выполнения кода после загрузки страницы используйте событие readystatechange
// Используйте 'interactive' вместо 'complete' для проверки возможности работы с DOM 
document.onreadystatechange = () => {
  if (document.readyState === 'interactive') {
    // Выполнится после загрузки страницы и создания всех DOM узлов
    initApp();
  }
};