Отложенная загрузка с IntersectionObserver
Откладывайте загрузку изображений и содержимого до появления в области просмотра
«Отложенная загрузка с IntersectionObserver» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Помимо встроенной loading="lazy"
Встроенная отложенная загрузка охватывает <img> и <iframe>. Для всего остального — фоновых изображений, видео, ресурсоёмких компонентов и сторонних виджетов — IntersectionObserver подходит для откладывания работы до момента, когда элемент приблизится к области просмотра.
Шаблон
Помечайте отложенные элементы атрибутом data-src, содержащим настоящий источник; отображайте небольшой заполнитель. Наблюдайте за каждым элементом; при пересечении переносите значение data-src в src (или иным образом активируйте элемент) и прекращайте наблюдение, чтобы обратный вызов больше никогда не срабатывал.
<img class="lazy" data-src="/photo.jpg" alt="Photo" width="800" height="600">
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: "200px" });
document.querySelectorAll(".lazy").forEach((img) => observer.observe(img));
</script>Отложенная загрузка фоновых изображений
Свойство CSS для фонового изображения нельзя загружать отложенно встроенными средствами. При пересечении установите el.style.backgroundImage = `url("${el.dataset.bg}")` или добавьте класс CSS, задающий фоновое изображение. В этот момент изображение начинает загружаться.
Отложенная загрузка видео
Для видео ниже сгиба изначально не указывайте источник и не добавляйте элементы source. При пересечении добавьте теги <source> и вызовите video.load(). Без этого метаданные видео могут начать загружаться сразу, ещё до того, как пользователь прокрутит страницу хотя бы близко к элементу.
Сторонние виджеты
Встраиваемые элементы соцсетей, виджеты комментариев и чат-скрипты загружают мегабайты данных. При пересечении динамически импортируйте скрипт настройки виджета: await import("/embed.js"). Затраты возникают только когда пользователь действительно прокручивает страницу до этого раздела.
Отложенная загрузка фрейма (помимо loading="lazy")
Встроенная отложенная загрузка фрейма всё равно загружает документ фрейма. Для тяжёлых встраиваемых элементов (карт, видеопроигрывателей) используйте шаблон «фасада»: покажите изображение-заполнитель; при нажатии или пересечении замените его настоящим фреймом. Это значительно уменьшает начальный объём страницы.
Предварительная загрузка с rootMargin
rootMargin: "200px" начинает загрузку за 200 пикселей до того, как элемент войдёт в область просмотра. Настройте это значение с учётом скорости прокрутки: слишком маленькое значение приводит к тому, что пользователи видят заполнители при быстрой прокрутке, а слишком большое сводит смысл отложенной загрузки на нет, поскольку загружается всё.
Вызывайте unobserve при срабатывании
Всегда вызывайте observer.unobserve(element) после активации отложенной загрузки. Иначе обратный вызов продолжит срабатывать каждый раз, когда элемент снова появляется в области просмотра, — это расходует CPU и может привести к ошибкам, если активация неидемпотентна.
Резервируйте место
Задавайте ширину и высоту для отложенно загружаемых изображений и минимальную высоту для отложенных контейнеров. Без явно заданных размеров страница перестраивается по мере загрузки содержимого, что вызывает раздражающие скачки прокрутки и ухудшает показатель совокупного смещения макета.
Запасной вариант без JS
Для полноценного прогрессивного улучшения оберните отложенный элемент в <noscript> с настоящим источником: <noscript><img src="/photo.jpg"></noscript>. Пользователи без JS получат изображение сразу, а пользователи с JS — отложенную версию. Сочетайте это с правильной разметкой data-src.
Пакетная обработка множества элементов
Один экземпляр observer может эффективно отслеживать сотни элементов. Не создавайте по одному observer на элемент. Создайте один общий observer с нужными параметрами и зарегистрируйте каждую цель с помощью observe().
Сочетание со встроенной loading="lazy"
Для <img> используйте loading="lazy" как основной механизм и оставляйте IntersectionObserver для случаев, которые встроенная отложенная загрузка не охватывает. Эти подходы хорошо сочетаются: встроенный механизм обрабатывает изображения ниже сгиба, а IntersectionObserver — фоновые изображения, компоненты и другие пользовательские загрузчики.
Проверка знаний
Почему важно вызывать observer.unobserve(element) после активации элемента с отложенной загрузкой?
Итоги
IntersectionObserver расширяет отложенную загрузку за пределы встроенной <img loading="lazy">, охватывая фоновые изображения, видео, сторонние виджеты и динамический импорт компонентов. Используйте заполнители data-src, заменяйте их при пересечении и прекращайте наблюдение после активации. Загружайте заранее с помощью rootMargin, резервируйте место, задавая ширину и высоту, предоставляйте запасной вариант без JS и сочетайте всё со встроенной отложенной загрузкой там, где она применима.
Часто задаваемые вопросы
Урок «Отложенная загрузка с IntersectionObserver» бесплатный?
Да — полный текст урока «Отложенная загрузка с IntersectionObserver» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Отложенная загрузка с IntersectionObserver»?
Откладывайте загрузку изображений и содержимого до появления в области просмотра Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Отложенная загрузка с IntersectionObserver»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- API IntersectionObserver и пороговые значения
- Отложенная загрузка с IntersectionObserver
- Реализация бесконечной прокрутки
- Настройка анимаций, связанных с прокруткой