Событие 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>
Поддержка браузерами
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 не готов.