Оптимизация загрузки медиа

При работе с fullPage.js часто возникает необходимость управлять большим количеством мультимедийного контента — изображениями, видео и аудио. Для оптимальной производительности и снижения времени загрузки страницы следует учитывать ленивую загрузку медиа, использование оптимизированных форматов и корректную настройку плагина.

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    lazyLoading: true, // встроенная поддержка ленивой загрузки изображений
    anchors: ['firstPage', 'secondPage', 'thirdPage']
});

Включение параметра lazyLoading: true позволяет fullPage.js автоматически подгружать изображения и видео только при переходе к соответствующему разделу. Это снижает нагрузку на сеть и ускоряет первоначальную отрисовку страницы.

Ленивое подключение изображений

Для ленивой загрузки изображений рекомендуется использовать атрибут data-src вместо стандартного src. fullPage.js заменяет его на src при активации секции.

<div class="section">
    <img data-src="images/photo1.webp" alt="Photo 1">
</div>
<div class="section">
    <img data-src="images/photo2.webp" alt="Photo 2">
</div>

Преимущества использования data-src и современных форматов изображений, таких как WebP, включают:

  • Снижение объема передаваемых данных на 30–50% по сравнению с JPEG/PNG.
  • Мгновенную визуализацию контента при прокрутке до секции.
  • Совместимость с fullPage.js без дополнительных библиотек.

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

Видео, встроенное в секции, является одним из самых ресурсоемких элементов. Для оптимизации можно:

  1. Использовать автоплей только активной секции.
  2. Применять ленивую загрузку с data-src.
  3. Отключать звук по умолчанию и использовать минимальный размер видео.

Пример:

<div class="section">
    <video class="lazy-video" data-src="videos/intro.mp4" muted playsinline></video>
</div>
fullpage_api.setAllowScrolling(true); // активация скроллинга
document.addEventListener('fpAfterLoad', function(event) {
    let section = event.detail.section;
    let video = section.querySelector('.lazy-video');
    if (video && !video.src) {
        video.src = video.dataset.src;
        video.play();
    }
});

Такой подход гарантирует, что видео не будет загружено до момента, когда пользователь действительно попадет на соответствующую секцию.

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

Фоновые изображения для секций часто оказываются тяжелее обычных тегов <img>. Решения:

  • Использовать CSS background-image с медиа-запросами для разных разрешений.
  • Подгружать фон через data-background в fullPage.js:
new fullpage('#fullpage', {
    sectionsColor: ['#fff', '#f2f2f2', '#ccc'],
    lazyLoading: true
});
<div class="section" data-background="images/bg1.webp"></div>
<div class="section" data-background="images/bg2.webp"></div>

fullPage.js автоматически загрузит фоновое изображение при активации секции.

Предзагрузка критического контента

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

  • Логотипы и навигационные элементы.
  • Основные изображения первой секции.
  • Минимальные видео-фрагменты для интерактивных секций.

Используется стандартный HTML <link rel="preload"> или встроенный скрипт:

<link rel="preload" href="images/hero.webp" as="image">
const preloadImages = ['images/hero.webp', 'images/logo.webp'];
preloadImages.forEach(src => {
    const img = new Image();
    img.src = src;
});

Контроль поведения при переходах

fullPage.js предоставляет события onLeave и afterLoad, которые позволяют управлять медиа:

  • При уходе со секции останавливать видео и аудио.
  • При входе в секцию — запускать видео, подгружать тяжелые изображения.

Пример:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        let video = origin.item.querySelector('video');
        if(video) video.pause();
    },
    afterLoad: function(origin, destination, direction){
        let video = destination.item.querySelector('video');
        if(video && !video.src) {
            video.src = video.dataset.src;
            video.play();
        }
    }
});

Итоговые рекомендации по оптимизации медиа

  1. Ленивая загрузка — основной способ ускорить первый рендер.
  2. Современные форматы — WebP для изображений, MP4/H.264 или WebM для видео.
  3. Минимизация размера видео — отключение аудио, сжатие до нужного разрешения.
  4. Фоновые изображения через data-background — экономия ресурсов при переключении секций.
  5. Предзагрузка критических элементов — логотипы, первый экран, ключевые видео.
  6. События fullPage.js — управление воспроизведением медиа только в активной секции.

Эти подходы совместно позволяют добиться плавного скроллинга, быстрого времени загрузки и минимальной нагрузки на браузер, даже при работе с большим объемом медиа-контента.

Оглавление