DOMContentLoaded

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

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

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

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

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

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

Свойства

Свойство Тип Описание
target Только для чтения EventTarget Цель события (самая важная в дереве DOM).
type Только для чтения DOMString Тип события.
bubbles Только для чтения Boolean Будет ли событие нормально бить
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>

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

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 не готов.

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

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: vittorio-tortugo, e-h-h
 Обновлялась последний раз: vittorio-tortugo,