DOMContentLoaded

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 1.0[1] 1.0 (1.7 или ранее)[1] 9.0[2] 9.0 3.1[1]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка (Да)[1] 1.0 (1)[1] ?[2] (Да) (Да)[1]

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

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

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