Lazy Loading

Контент,
который ждёт
своего момента

Полный пример страницы с Lazy Blocks — блоки появляются только тогда, когда пользователь доходит до них. Intersection Observer API в действии.

Intersection Observer API · CSS Transitions · Stagger Animation
Скролл вниз

Lazy Blocks — паттерн, при котором каждый раздел страницы невидим до появления в viewport. Браузер отслеживает пересечение элемента с областью видимости и запускает анимацию.

3×
Меньше начальной загрузки
98%
Поддержка браузеров
0ms
Задержка при прокрутке
Ключевая идея

Ничего лишнего до момента просмотра

Intersection Observer отслеживает, вошёл ли элемент в видимую область. Как только это происходит — добавляется класс .visible, CSS-переход завершает остальное.

01

Базовый fade + slide

Самый распространённый вариант: opacity от 0 до 1 с translateY(40px → 0). Работает для любого контента.

02

Stagger для списков

Дочерние элементы появляются с нарастающей задержкой — создаёт ощущение живого, упорядоченного движения.

⬛
Медиа загружается лениво
"
Хорошая анимация не привлекает внимание к себе — она делает интерфейс ощутимым и понятным.
— Принципы motion-дизайна

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

История появления блоков

Каждый шаг в эволюции ленивой загрузки снижал сложность и повышал надёжность для разработчика.

scroll event getBoundingClientRect IntersectionObserver requestAnimationFrame
До 2016
Scroll + getBoundingClientRect
Слушатель события scroll + ручная проверка координат. Блокировал основной поток при каждом движении.
2016
Intersection Observer v1
Встроенный браузерный API. Асинхронный, не блокирует поток, отличная производительность.
2019
Intersection Observer v2
Добавлена проверка visibility: отслеживает реальную видимость, а не только пересечение.
Сейчас
Нативный loading="lazy"
Браузер сам откладывает загрузку изображений и iframe без JavaScript.

Применение

Когда использовать Lazy Blocks

Паттерн особенно полезен на длинных лендингах, порталах с контентом и SPA — везде, где большой DOM существует ещё до того, как пользователь добрался до соответствующего раздела.

Стоит избегать чрезмерных задержек и сложных цепочек: анимация должна ускорять восприятие, а не задерживать доступ к контенту.

Landing page Portfolio Blog Dashboard E-commerce

Начни использовать сегодня

Intersection Observer API работает во всех современных браузерах без полифилов.

Минимальная реализация

Весь механизм — 15 строк

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target); // сработал — отписываемся
    }
  });
}, {
  threshold: 0.1,       // 10% блока в viewport
  rootMargin: '0px 0px -60px 0px'
});

document.querySelectorAll('.lazy-block')
  .forEach(el => observer.observe(el));