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