Lazy Load — пишем на чистом JavaScript загрузку изображений

Что такое Lazy Load?

Ленивая загрузка изображений (Lazy Load) — техника оптимизации веб-страниц, при которой изображения загружаются только при попадании в область видимости пользователя. Это сокращает:

• Число HTTP-запросов при загрузке страницы

• Объем передаваемых данных

• Время полной загрузки контента

Альтернативы для оптимизации ресурсов:

• Спрайты для иконок

• Векторные шрифты (FontAwesome)

• SVG для масштабируемой графики

• WebP для сжатия изображений

Зачем нужен Lazy Load?

1. Ускорение загрузки страницы

   • Браузер загружает только видимые изображения

2. Экономия трафика

   • Пользователи не скачивают скрытый контент

3. Повышение Core Web Vitals

   • Улучшение метрик LCP (Largest Contentful Paint) и FID (First Input Delay)

Реализация за 5 строк кода (без jQuery!)

Используем Intersection Observer API — современный инструмент для отслеживания элементов в области видимости:

document.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  }, { threshold: 0.5 });
  
  document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
});

Как это работает:

1. Ищем все изображения с атрибутом data-src (например: <img data-src="photo.jpg">)

2. При пересечении с областью видимости на 50% (threshold: 0.5) подставляем data-src в реальный src

3. Прекращаем наблюдение после загрузки (unobserve)

Ленивая загрузка для фоновых изображений

Аналогичный подход для элементов с CSS-фонами:

document.addEventListener('DOMContentLoaded', () => {
  const bgObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.backgroundImage = `url('${entry.target.dataset.bg}')`;
        bgObserver.unobserve(entry.target);
      }
    });
  }, { threshold: 0.5 });
  
  document.querySelectorAll('[data-bg]').forEach(el => bgObserver.observe(el));
});

Пример HTML:

<div data-bg="background.webp">...</div>

Сферы применения Intersection Observer

• Бесконечная лента (соцсети, товары в интернет-магазине)

• Анализ просмотра рекламы

• Запуск анимаций при скролле

• Динамическая подгрузка комментариев

Важные нюансы и ограничения

1. SEO-риски

   • Поисковые боты могут не обрабатывать JavaScript. Решение:

     • Использовать <noscript> с обычными <img> для критически важных изображений

     • Подключать Lazy Load только для контента "ниже сгиба" (below the fold)

2. Резервная реализация

   • Добавьте fallback для старых браузеров:

   if (!('IntersectionObserver' in window)) {
     document.querySelectorAll('img[data-src]').forEach(img => {
       img.src = img.dataset.src;
     });
   }

   
   

3. Оптимальные настройки

   • threshold: 0.5 — запуск загрузки при 50% видимости элемента

   • Для длинных страниц уменьшите threshold до 0.1

HTML-разметка для Lazy Load

<!-- Обычные изображения -->
<img data-src="product.webp" alt="Описание товара" class="lazy-img">

<!-- Фоновые изображения -->
<section data-bg="hero-banner.webp" class="lazy-bg"></section>

<!-- Fallback для поисковиков -->
<noscript>
  <img src="product.webp" alt="Описание товара">
</noscript>

Итог: Lazy Load — мощный инструмент оптимизации. Реализация на чистом JavaScript с Intersection Observer занимает менее 10 строк кода, не требует jQuery и значительно ускоряет загрузку страницы. Используйте его для медиаконтента, который не виден при первом открытии страницы, и всегда учитывайте SEO-ограничения.