Категории

• Все категории
• 2040
• CG
• IOT умный дом
• Joomla
• Linux
• Windows
• Безопасность
• железо
• Сети LAN
• Создание сайтов

Ленивая загрузка изображений (Lazy Loading) на чистом JavaScript

27.10.2025 11:34 | коды из категории: Создание сайтов

Зачем нужна ленивая загрузка?

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

• Ускорить первоначальную загрузку страницы
• Снизить потребление трафика и памяти
• Улучшить метрики Google Core Web Vitals (LCP, FID и др.)
• Повысить удобство для пользователей на слабых устройствах и медленном интернете

В этой статье — простой и эффективный способ реализовать lazy loading на чистом JavaScript без сторонних библиотек.

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

Мы используем современный Intersection Observer API, который позволяет отслеживать, когда элемент появляется в области просмотра. Это энергоэффективно и не вызывает «лагов» при прокрутке, в отличие от обработки события scroll.

HTML-разметка

Изображения сначала содержат плейсхолдер (можно использовать маленькое размытое изображение или просто оставить src пустым), а реальный путь к картинке хранится в атрибуте data-src:

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E</svg>" 
     data-src="путь/к/реальной/картинке.jpg" 
     alt="Описание изображения" 
     class="lazy">

Плейсхолдер в src — это 1×1 прозрачный SVG. Он гарантирует, что браузер не будет пытаться загрузить «пустой» src, и при этом изображение не «прыгает» при загрузке.

JavaScript-скрипт ленивой загрузки

Добавьте этот скрипт перед закрывающим тегом </body> или оберните в DOMContentLoaded:

document.addEventListener("DOMContentLoaded", () => {
  const lazyImages = document.querySelectorAll("img.lazy");

  if ("IntersectionObserver" in window) {
    const imageObserver = 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);
        }
      });
    });

    lazyImages.forEach(img => imageObserver.observe(img));
  } else {
    // Fallback для старых браузеров (например, IE11)
    lazyImages.forEach(img => {
      img.src = img.dataset.src;
      img.classList.remove("lazy");
    });
  }
});

Почему это работает для SEO и Google?

• Поисковые роботы Google корректно индексируют изображения с data-src, особенно если указаны alt и семантическое описание.
• Первоначальная загрузка страницы становится быстрее — это напрямую влияет на LCP (Largest Contentful Paint).
• Нет внешних зависимостей — скрипт легковесный и не блокирует рендеринг.

Что дальше?

Этот подход можно расширить:

• Ленивая загрузка фоновых изображений (data-bg)
• Отложенная инициализация видео или iframe
• Интеграция с вашей CMS или генератором статических сайтов

Если вы используете PHP, React или другой фреймворк — логика остаётся той же: подставляйте data-src вместо src, а скрипт сам подгрузит картинку в нужный момент.

Заключение

Ленивая загрузка — один из самых простых и эффективных способов ускорить сайт. Реализация на чистом JavaScript занимает меньше 20 строк кода, но даёт ощутимый прирост в производительности и UX. Внедряйте — и ваши пользователи (и Google) скажут вам спасибо.

Есть вопросы или идеи для улучшения? Пишите в комментарии — обсудим!

← Назад к списку

---