--- title: DOMContentLoaded slug: Web/Events/DOMContentLoaded tags: - события translation_of: Web/API/Window/DOMContentLoaded_event ---

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

{{Note("Синхронный JavaScript останавливает парсинг DOM.")}}

{{Note("Существуют различные библиотеки, как общего назначения так и специализированные, предлагающие кросс-браузерные методы, позволяющие определить, что DOM готов к использованию.")}}

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

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

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

Спецификация
HTML5
Интерфейс 
Event
Всплывает
Да
Отменяемое
Да (несмотря на то, что в спецификации указано как простое событие, которое не является отменяемым)
Цель 
Document
Default Action
Нет.

Свойства

Свойство Тип Описание
target {{readonlyInline}} {{domxref("EventTarget")}} The event target (the topmost target in the DOM tree).
type {{readonlyInline}} {{domxref("DOMString")}} Тип события.
bubbles {{readonlyInline}} {{jsxref("Boolean")}} Whether the event normally bubbles or not.
cancelable {{readonlyInline}} {{jsxref("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>

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

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1.0[1] {{CompatGeckoDesktop("1")}}[1] 9.0[2] 9.0 3.1[1]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка {{CompatVersionUnknown}}[1] {{CompatGeckoMobile("1")}}[1] {{CompatUnknown}}[2] {{CompatVersionUnknown}} {{CompatVersionUnknown}}[1]

[1] Всплытие для этого события поддерживается как минимум с версий Gecko 1.9.2, Chrome 6, и Safari 4.

[2] Internet Explorer 8 поддерживает событие readystatechange, которое можно использовать для определения готовности DOM. В более ранних версиях Internet Explorer,это событие можно определить циклическим выполнением document.documentElement.doScroll("left");, это событие будет выбрасывать ошибку если DOM не готов.

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