Document: DOMContentLoaded event

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

Всплытие да
Отменяемый Да (хотя указано как простое событие, которое не может быть отменено)
Интерфейс Event
Свойство обработчика событий нет

Разные события,load, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании load, там где DOMContentLoaded было бы более уместным.

Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш JavaScript асинхронным and оптимизировать загрузку таблиц стилей. Если загружать как обычно, таблицы стилей  тормозят разбор DOM так как они загружаются параллельно, "крадя" трафик у основного HTML документа.

Примеры

Основное применение

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM полностью загружен и разобран');
});

Отложенный DOMContentLoaded

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM полностью загружен и разобран');
  });

for( let i = 0; i < 1000000000; i++)
{} // Этот синхронный скрипт откладывает разбор DOM,
   // так что событие DOMContentLoaded будет запущено позже.
</script>

Проверка того, завершена ли загрузка

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

function doSomething() {
  console.info('DOM загружен');
}

if (document.readyState === 'loading') {  // Загрузка ещё не закончилась
  document.addEventListener('DOMContentLoaded', doSomething);
} else {  // `DOMContentLoaded` Уже сработал
  doSomething();
}

Живые примеры

HTML

<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>

JS

const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');

reload.addEventListener('click', () => {
  log.textContent ='';
  window.setTimeout(() => {
      window.location.reload(true);
  }, 200);
});

window.addEventListener('load', (event) => {
    log.textContent = log.textContent + 'load\n';
});

document.addEventListener('readystatechange', (event) => {
    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});

document.addEventListener('DOMContentLoaded', (event) => {
    log.textContent = log.textContent + `DOMContentLoaded\n`;
});

Result

Спецификации

Спецификация Статус Комментарий
HTML Living Standard
Определение 'DOMContentLoaded' в этой спецификации.
Живой стандарт
HTML5
Определение 'DOMContentLoaded' в этой спецификации.
Рекомендация

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
DOMContentLoaded eventChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1IE Полная поддержка 9Opera Полная поддержка 9Safari Полная поддержка 3.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

Смотрите также