Document: DOMContentLoaded event

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

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

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

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

Примеры

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

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

Отложенный DOMContentLoaded

html

<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

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>

body {
  display: grid;
  grid-template-areas: "control  log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}

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

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

События связанные с: load, readystatechange, beforeunload, unload
Это событие Window нацеленное на: DOMContentLoaded (en-US)