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

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

Specification
HTML Standard
# stop-parsing

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

BCD tables only load in the browser

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