Как на JS реализовать «ленивую загрузку» (lazy loading) изображений для ускорения сайта?

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

## Способ 1: Нативный атрибут loading=»lazy»

Самый простой способ — использовать встроенный HTML-атрибут:

html

Этот атрибут поддерживается всеми современными браузерами. Браузер сам определяет момент загрузки изображения. Недостаток — нет полного контроля над поведением.

## Способ 2: IntersectionObserver API (рекомендуемый)

Более гибкий и мощный подход с использованием JavaScript:

html

javascript
const lazyImages = document.querySelectorAll(‘img.lazy’);

const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove(‘lazy’);
observer.unobserve(img);
}
});
}, {
rootMargin: ‘0px 0px 200px 0px’, // загружать за 200px до появления
threshold: 0.01
});

lazyImages.forEach(img => observer.observe(img));

### Ключевые параметры IntersectionObserver:
— **root** — элемент-контейнер (по умолчанию viewport)
— **rootMargin** — отступ вокруг root, позволяет загружать изображения заранее
— **threshold** — доля видимости элемента для срабатывания (0.01 = 1%)

## Способ 3: Fallback для старых браузеров

Для поддержки браузеров без IntersectionObserver добавьте полифил или используйте событие scroll:

javascript
if (‘IntersectionObserver’ in window) {
// используем IntersectionObserver
} else {
// fallback: загружаем все изображения сразу
lazyImages.forEach(img => {
img.src = img.dataset.src;
});
}

## Оптимизация с srcset и WebP

Для адаптивных изображений используйте data-srcset:

html

В обработчике добавьте:
javascript
if (img.dataset.srcset) {
img.srcset = img.dataset.srcset;
}

## Дополнительные советы

1. **Используйте placeholder** — размытое превью (blur-up) или цветной блок вместо пустого места
2. **Задавайте размеры** — атрибуты width и height предотвращают сдвиг контента (CLS)
3. **Не применяйте lazy loading** к изображениям выше линии сгиба (above the fold)
4. **Тестируйте в DevTools** — вкладка Network позволяет отследить момент загрузки

Правильно реализованная ленивая загрузка может сократить начальный объём загружаемых данных на 50–80% и улучшить показатели Core Web Vitals (LCP, CLS), что положительно влияет на SEO.