Document: DOMContentLoaded event
Событие DOMContentLoaded
запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.
Всплытие | да |
---|---|
Отменяемый | Да (хотя указано как простое событие, которое не может быть отменено) |
Интерфейс | Event |
Свойство обработчика событий | нет |
Разные события,load
, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании load
, там где DOMContentLoaded
было бы более уместным.
Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш JavaScript асинхронным and оптимизировать загрузку таблиц стилей. Если загружать как обычно, таблицы стилей тормозят разбор DOM так как они загружаются параллельно, "крадя" трафик у основного HTML документа.
Примеры
Основное применение
js
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM полностью загружен и разобран");
});
Отложенный DOMContentLoaded
html
<script>
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM полностью загружен и разобран");
});
for (let i = 0; i < 1000000000; i++) {} // Этот синхронный скрипт откладывает разбор DOM,
// так что событие DOMContentLoaded будет запущено позже.
</script>
Проверка того, завершена ли загрузка
DOMContentLoaded
может сработать до того, как ваш скрипт будет запущен, поэтому разумно это проверить, перед добавлением обработчика.
js
function doSomething() {
console.info("DOM загружен");
}
if (document.readyState === "loading") {
// Загрузка ещё не закончилась
document.addEventListener("DOMContentLoaded", doSomething);
} else {
// `DOMContentLoaded` Уже сработал
doSomething();
}
Живые примеры
HTML
html
<div class="controls">
<button id="reload" type="button">Reload</button>
</div>
<div class="event-log">
<label>Event log:</label>
<textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
JS
js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");
reload.addEventListener("click", () => {
log.textContent = "";
window.setTimeout(() => {
window.location.reload(true);
}, 200);
});
window.addEventListener("load", (event) => {
log.textContent = log.textContent + "load\n";
});
document.addEventListener("readystatechange", (event) => {
log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});
document.addEventListener("DOMContentLoaded", (event) => {
log.textContent = log.textContent + `DOMContentLoaded\n`;
});
Result
Спецификации
Specification |
---|
HTML Standard # stop-parsing |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- События связанные с:
load
,readystatechange
,beforeunload
,unload
- Это событие
Window
нацеленное на:DOMContentLoaded