Ленивая загрузка контента

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

Основная цель — снизить начальное время загрузки страницы и уменьшить потребление ресурсов, особенно при наличии большого количества секций.

Встроенная поддержка lazy loading

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

  • data-src вместо src для изображений
  • data-src для iframe
  • data-background для фоновых изображений

Пример:

<div class="section">
  <img data-src="image.jpg" alt="Example">
</div>

В этом случае изображение не загружается при инициализации страницы. Оно подгрузится только тогда, когда секция станет активной.

Как работает механизм

При прокрутке fullPage.js отслеживает текущую активную секцию и ближайшие к ней. Когда секция становится видимой:

  1. Библиотека ищет элементы с data-src, data-srcset, data-background
  2. Переносит значения в соответствующие реальные атрибуты (src, srcset, style.background-image)
  3. Инициирует загрузку ресурса

Это происходит автоматически, без необходимости ручного вмешательства.

Поддерживаемые типы ресурсов

Изображения

<img data-src="photo.jpg">

Адаптивные изображения

<img data-srcset="small.jpg 480w, large.jpg 800w">

Фоновые изображения

<div class="section" data-background="bg.jpg"></div>

Видео и iframe

<iframe data-src="https://example.com"></iframe>

Управление через опции

В fullPage.js есть параметр lazyLoading, который позволяет включать или отключать механизм:

new fullpage('#fullpage', {
  lazyLoading: true
});

По умолчанию он включён.

Дополнительно используется параметр:

lazyLoadThreshold: 2

Он определяет, сколько соседних секций (вверх и вниз) будут загружаться заранее.

Предзагрузка соседних секций

Механизм lazyLoadThreshold позволяет балансировать между производительностью и плавностью:

  • 0 — загрузка только текущей секции
  • 1 — текущая + одна соседняя
  • 2 — текущая + две соседние

Пример:

new fullpage('#fullpage', {
  lazyLoadThreshold: 1
});

Это уменьшает вероятность «пустых» секций при быстром скролле.

Оптимизация изображений

Для максимальной эффективности lazy loading важно:

  • использовать сжатые изображения (WebP, AVIF)
  • правильно задавать размеры (width, height)
  • избегать слишком больших файлов

Пример:

<img 
  data-src="image.webp" 
  width="800" 
  height="600" 
  alt="Optimized image">

Комбинирование с нативным lazy loading

Современные браузеры поддерживают атрибут loading="lazy":

<img src="image.jpg" loading="lazy">

Однако при использовании fullPage.js это может конфликтовать с внутренней системой, так как библиотека управляет загрузкой вручную. Рекомендуется использовать только один подход, предпочтительно встроенный механизм fullPage.js.

Ленивые фоны и CSS

Фоновые изображения часто создают наибольшую нагрузку. В fullPage.js применяется атрибут data-background, который позже преобразуется в:

background-image: url('...');

Пример:

<div class="section" data-background="large-bg.jpg"></div>

Важно учитывать:

  • фон загружается только при активации секции
  • CSS-стили применяются динамически
  • возможно кратковременное отсутствие фона при быстром скролле

Работа с видео

Видео — один из самых тяжёлых ресурсов. Ленивая загрузка позволяет отложить их загрузку:

<video data-src="video.mp4"></video>

После активации секции:

  • атрибут src устанавливается
  • начинается загрузка
  • при необходимости запускается воспроизведение

Дополнительно можно использовать:

<video data-src="video.mp4" muted autoplay loop></video>

Контроль через события

fullPage.js предоставляет события, которые можно использовать для дополнительной логики:

afterLoad: function(origin, destination, direction){
  // секция загружена
}

Можно вручную инициировать загрузку ресурсов:

afterLoad: function(origin, destination){
  const section = destination.item;
  const images = section.querySelectorAll('[data-src]');
  
  images.forEach(img => {
    img.setAttribute('src', img.getAttribute('data-src'));
  });
}

Частые ошибки

Использование src вместо data-src

<img src="image.jpg"> <!-- загрузится сразу -->

Отсутствие размеров изображений

Приводит к «прыжкам» layout при загрузке.

Слишком большой threshold

lazyLoadThreshold: 10

Фактически отключает ленивую загрузку.

Дублирование механизмов

Одновременное использование:

  • fullPage.js lazy loading
  • Intersection Observer
  • loading="lazy"

может вызвать некорректное поведение.

Продвинутая кастомизация

Можно полностью отключить встроенную систему и реализовать свою:

new fullpage('#fullpage', {
  lazyLoading: false
});

После этого применяется собственная логика, например через Intersection Observer:

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const el = entry.target;
      el.src = el.dataset.src;
      observer.unobserve(el);
    }
  });
});

document.querySelectorAll('[data-src]').forEach(el => {
  observer.observe(el);
});

Производительность и UX

Ленивая загрузка напрямую влияет на:

  • Time to First Paint (TTFP)
  • Largest Contentful Paint (LCP)
  • плавность прокрутки

Правильная настройка позволяет:

  • ускорить загрузку страницы
  • снизить нагрузку на сеть
  • улучшить восприятие интерфейса

Однако чрезмерная агрессивность (слишком поздняя загрузка) может приводить к задержкам отображения контента.

Рекомендованные практики

  • использовать data-src для всех тяжёлых ресурсов
  • настраивать lazyLoadThreshold в зависимости от сценария
  • оптимизировать изображения перед загрузкой
  • избегать дублирующих механизмов
  • тестировать поведение при быстром скролле
  • учитывать мобильные устройства с медленным интернетом

Взаимодействие с динамическим контентом

При добавлении секций после инициализации:

fullpage_api.reBuild();

После этого lazy loading снова применяется к новым элементам.

Если контент подгружается через AJAX, необходимо:

  • убедиться, что используются data-src
  • вызвать reBuild()
  • при необходимости вручную инициировать загрузку

Итоговая архитектура использования

  1. HTML-разметка с data-* атрибутами
  2. Инициализация fullPage.js с параметрами lazy loading
  3. Опциональная настройка threshold
  4. Обработка событий при необходимости
  5. Оптимизация ресурсов

Такая схема обеспечивает высокую производительность даже при сложных интерфейсах с большим количеством медиа-контента.

Оглавление