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

Locomotive Scroll — это библиотека для создания плавной анимации прокрутки и эффекта параллакса на веб-страницах. В современных проектах важно минимизировать нагрузку на страницу, поэтому целесообразно использовать ленивую загрузку библиотеки, подключая её только тогда, когда это действительно необходимо.

Динамическая загрузка через import()

ES-модули позволяют загружать библиотеку динамически с помощью функции import(). Такой подход гарантирует, что скрипт будет загружен только при необходимости:

let scroll;

async function initScroll() {
    const LocomotiveScroll = await import('locomotive-scroll');
    scroll = new LocomotiveScroll.default({
        el: document.querySelector('#scroll-container'),
        smooth: true,
        multiplier: 1,
    });
}

Ключевые моменты:

  • await import('locomotive-scroll') возвращает объект модуля, из которого нужно взять default для создания экземпляра.
  • Использование async/await упрощает асинхронную инициализацию, обеспечивая корректный порядок выполнения кода.

Ленивое подключение через Intersection Observer

Если элементы с прокруткой находятся не на первой видимой области страницы, подключение библиотеки можно отложить до момента их появления в зоне видимости. Для этого применяется Intersection Observer:

const scrollContainer = document.querySelector('#scroll-container');

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            initScroll();
            observer.disconnect();
        }
    });
}, { threshold: 0.1 });

observer.observe(scrollContainer);

Преимущества метода:

  • Библиотека загружается только при необходимости.
  • Снижает время первичной загрузки страницы.
  • Позволяет использовать плавную анимацию на больших страницах без задержек.

Оптимизация при использовании с Webpack или Vite

Для современных сборщиков модулей важно указать chunkName или использовать динамический импорт с аннотацией:

const LocomotiveScroll = await import(
    /* webpackChunkName: "locomotive-scroll" */ 'locomotive-scroll'
);

Это создаёт отдельный чанковый файл, который будет загружен лениво.

В Vite динамический импорт автоматически разделяет код на чанки, так что дополнительных настроек чаще всего не требуется.

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

Locomotive Scroll требует корректной высоты элементов для правильного расчёта прокрутки. При ленивой загрузке важно убедиться, что DOM уже сформирован:

window.addEventListener('DOMContentLoaded', () => {
    const triggerElement = document.querySelector('#scroll-container');
    if (triggerElement) {
        initScroll();
    }
});

Для динамически подгружаемого контента после AJAX-запросов или SPA-навигации рекомендуется пересоздавать или обновлять экземпляр:

scroll.update();

Метод update() пересчитывает размеры и позиции элементов, что критично при динамическом контенте.

Использование в сочетании с анимациями

Ленивая загрузка позволяет подключать Locomotive Scroll только на страницах, где действительно нужны эффекты. Это снижает нагрузку на CPU и ускоряет критическую визуальную загрузку.

Для анимаций с библиотеками вроде GSAP достаточно убедиться, что экземпляр Locomotive Scroll инициализирован перед использованием:

import { gsap } from 'gsap';

function animateOnScroll() {
    scroll.on('scroll', (obj) => {
        gsap.to('.box', { y: obj.scroll.y * 0.5 });
    });
}

Практические советы

  • Выделять контейнер для прокрутки отдельным элементом (#scroll-container) и загружать библиотеку только на страницах, где он присутствует.
  • Вызывать scroll.destroy() при переходе между страницами SPA для предотвращения утечек памяти.
  • Использовать scroll.update() после добавления или изменения элементов в DOM.

Ленивая загрузка Locomotive Scroll позволяет сочетать плавную анимацию с высокой производительностью, минимизируя влияние на время загрузки и отзывчивость страницы.

Оглавление