JavaScript с нуля
- Автор: Кирупа Чиннатамби
- Жанр: Образование
- Дата выхода: 2021
- Цикл: Библиотека программиста
Читать книгу "JavaScript с нуля"
DOMContentLoaded и load Events
Есть два события, представляющих два основных ориентира в процессе загрузки страницы: DOMContentLoaded и load. DOMContentLoad срабатывает в конце стадии 2, когда DOM страницы полностью обработан. Событие load срабатывает в конце стадии 3, как только страница полностью завершает загрузку. Вы можете использовать эти события для выбора времени выполнения кода.
Ниже приведен фрагмент кода с использованием этих двух событий:
document.addEventListener("DOMContentLoaded", theDomHasLoaded,
false);
window.addEventListener("load", pageFullyLoaded, false);
function theDomHasLoaded(e) {
// делает что-нибудь
}
function pageFullyLoaded(e) {
// снова делает что-нибудь
}
Вы используете эти события так же, как и любые другие, но при этом важно учесть, что вам надо прослушивать DOMContentLoaded из элемента document, а load — из элемента window.
Теперь, когда со всеми скучными техническими деталями покончено, подумаем, почему эти события важны? Очень просто. Если у вас есть код, опирающийся на работу с DOM вроде всего того, что использует querySelector или querySelectorAll, то вам нужно обеспечить, чтобы этот код запускался только после полной загрузки DOM. Если вы попробуете обратиться к DOM до этого момента, то либо получите неполные результаты, либо не получите их вообще.
Вот прекрасный радикальный пример от Кайла Мюррея:
<!DOCTYPE html>
<html>
<head>
<script>
// попытайтесь проанализировать здесь содержимое книги
</script>
</head>
<body>
[Вставьте здесь полную копию /Войны и мира/]
</body>
</html>
Верный способ избежать ситуации, в которой код запускается до момента готовности DOM, — это прослушать событие DOMContentLoaded и установить запуск кода, опирающегося на DOM только тогда, когда это событие будет услышано:
document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);
function theDomHasLoaded(e) {
let headings = document.querySelectorAll("h2");
// делает что-нибудь с изображениями
}
Для случаев, когда нужно, чтобы код запускался только после полной загрузки страницы, используйте событие load. За все годы использования JavaScript мне не так часто приходилось использовать это событие на уровне документа, за исключением проверки итоговых размеров загруженного изображения или создания простых индикаторов прогресса.
