DOMContentLoaded

Событие DOMContentLoaded происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов. Значительно отличающееся от него событие load (en-US) используется для отслеживания только полностью загруженной страницы. Широко распространённой ошибкой является использование load (en-US) в ситуации когда DOMContentLoaded является более подходящим, будьте внимательны.

Примечание: Синхронный JavaScript останавливает парсинг DOM.

Примечание: Существуют различные библиотеки, как общего назначения так и специализированные, предлагающие кросс-браузерные методы, позволяющие определить, что DOM готов к использованию.

Ускорение работы

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

Основная информация

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

HTML5

Интерфейс

Event

Всплывает

Да

Отменяемое

Да (несмотря на то, что в спецификации указано как простое событие, которое не является отменяемым)

Цель

Document

Default Action

Нет.

Свойства

Свойство Тип Описание
target Только для чтения EventTarget The event target (the topmost target in the DOM tree).
type Только для чтения DOMString Тип события.
bubbles Только для чтения Boolean Whether the event normally bubbles or not.
cancelable Только для чтения Boolean Возможно ли отменить событие.

Пример

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

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

for(var i=0; i<1000000000; i++)
{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>

Поддержка браузерами

{{Compat}}

Связанные события