Документ: событие DOMContentLoaded

Базовая Широко поддерживается

Эта функция хорошо отработана и работает на многих устройствах и версиях браузера. Она доступна во всех браузерах с июля 2015 года.

Событие DOMContentLoaded срабатывает, когда HTML-документ полностью обработан, и все отложенные скрипты (<script defer src="…"> и <script type="module">) загружены и выполнены. Оно не ждет завершения загрузки других элементов, таких как изображения, подрамки и асинхронные скрипты.

DOMContentLoaded не ждет загрузки стилей, однако отложенные скрипты ждут загрузки стилей, и событие DOMContentLoaded помещается в очередь после отложенных скриптов. Также скрипты, которые не являются отложенными или асинхронными (например, <script>), будут ждать загрузки уже обработанных стилей.

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

Это событие не может быть отменено.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("DOMContentLoaded", (event) => {});

Тип события

Общее Event.

Примеры

Базовое использование

document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");
});

Отсрочка DOMContentLoaded

<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM fully loaded and parsed");
  });

  for (let i = 0; i < 1_000_000_000; i++);
  // This synchronous script is going to delay parsing of the DOM,
  // so the DOMContentLoaded event is going to launch later.
</script>

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

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

function doSomething() {
  console.info("DOM loaded");
}

if (document.readyState === "loading") {
  // Loading hasn't finished yet
  document.addEventListener("DOMContentLoaded", doSomething);
} else {
  // `DOMContentLoaded` has already fired
  doSomething();
}

Примечание: Здесь нет проблемы гонки — невозможно, чтобы документ загрузился между проверкой if и вызовом addEventListener(). JavaScript выполняется до завершения, что означает, если документ загружается в определенный момент цикла обработки событий, он не может загрузиться до следующего цикла, в котором обработчик doSomething уже прикреплен и будет вызван.

Пример

HTML

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

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

JavaScript

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

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

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

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

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

Результат

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

Спецификация
HTML # stop-parsing

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`DOMContentLoaded_event`	1	12	1	9	3.1	18	4	10.1	2	1.0	4.4

См. также

Связанные события: load, readystatechange, beforeunload, unload

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event