DOMContentLoaded

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

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

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

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

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

HTML5

Интерфейс 

Event

Всплывает

Да

Отменяемое

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

Цель 

Document

Default Action

Нет.

Свойства

Пример

<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>

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

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

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

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

• DOMContentLoaded
• readystatechange
• load
• beforeunload
• unload