Как загружать изображение с сервера только после того, как пользователь до него доскроллил?

Как реализовать ленивую загрузку изображения?

• Веб-разработка, оптимизация загрузки
• Ленивая загрузка (lazy loading) — получение ресурса при приближении к viewport
• Применить нативный атрибут loading="lazy" к <img> (поддерживается современными браузерами)
• Для более сложных сценариев использовать Intersection Observer API
• Он определяет, когда изображение появляется в области видимости
• После срабатывания заменяет data-src на src
• Это сокращает расход трафика и ускоряет рендеринг страницы
• Подход особенно эффективен на страницах с большим числом изображений и при активной прокрутке
• Поддержка доступна в популярных SPA-фреймворках (React, Vue) и библиотеках (lazysizes)

Итог: отложенную загрузку через loading="lazy" или Intersection Observer используют для оптимизации UX и производительности.

Подробный ответ

Основной ответ

Чтобы сервер отправлял изображение только после того, как пользователь прокрутит страницу до него, применяют ленивую загрузку (lazy loading). Суть метода заключается в переносе загрузки ресурса — в данном случае картинки — на момент, когда она приближается к области просмотра или становится почти видимой. Благодаря этому уменьшается потребление трафика и ускоряется первоначальная загрузка страницы.

Ключевые моменты

• Intersection Observer API — современный производительный инструмент для реализации lazy loading. Он отслеживает появление элемента в viewport и избавляет от необходимости постоянно обрабатывать затратные события scroll.
• Более устаревший вариант — подписаться на события scroll и определять положение изображения с помощью getBoundingClientRect(). Однако такой подход работает менее эффективно и обычно требует дебаунса.
• В HTML также предусмотрен атрибут loading="lazy" для элементов <img>. Современные браузеры поддерживают его нативно (сначала Chrome 76+, Firefox 75+, Safari 15.4+), поэтому ленивую загрузку можно организовать без JS.

Практический контекст

В React 18+ для управления загрузкой изображений обычно применяют Intersection Observer, особенно когда требуются дополнительные пользовательские сценарии, например анимации или placeholder. На сайтах без JS при необходимости можно задействовать loading="lazy". В больших проектах сокращение числа ресурсов, загружаемых сразу, помогает добиться время загрузки первого контента < 2 сек и улучшить показатели Core Web Vitals. Нередко этот подход дополняют отдачей изображений через CDN и оптимизацией форматов (WebP, AVIF).