Понимание готовности DOM без фреймворков

При разработке веб-приложений решающее значение имеет определение того, когда объектная модель документа (DOM) готова к манипуляциям. Хотя такие платформы, как jQuery, предлагают прослушиватели ReadyState, в этой статье рассматриваются альтернативные подходы к определению готовности DOM.

Прямой доступ к состоянию DOM

Вместо того, чтобы полагаться на платформы, вы можете напрямую проверьте свойство ReadyState документа:

if (document.readyState === 'complete') {
  // DOM is ready
}

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

Проверка готовности DOM на основе событий

Более кроссбраузерный подход — прослушивать событие DOMContentLoaded, которое срабатывает, когда DOM готов к использованию. манипуляция:

function fireOnReady() {
  // ...
}
if (document.readyState === 'complete') {
  fireOnReady();
} else {
  document.addEventListener("DOMContentLoaded", fireOnReady);
}

Использование недокументированного свойства isReady jQuery

Несмотря на то, что jQuery недокументировано, он предоставляет свойство isReady, которое внутренне указывает на состояние готовности DOM:

if ($.isReady) {
  // DOM is ready
} else {
  // DOM is not yet ready
}

Облегченный фрагмент готового DOM

Вдохновленный фрагментом Дастина Диаса, вы можете создать мини-прослушиватель, готовый к DOM, следующим образом:

if (!/in/.test(document.readyState)) {
  // Document is ready
} else {
  // Document is not ready
}

Эта проверка использует тот факт, что значение ReadyState содержит «in» в более ранних состояниях загрузки, что делает его надежным индикатором готовности DOM.