afterLoad

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

Синтаксис и параметры

afterLoad подключается через объект настроек при инициализации fullPage.js или через метод fullpage_api.setAllowScrolling и другие события. Основной синтаксис выглядит так:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log("Секция загружена:", destination.index);
    }
});

Параметры функции:

  • origin – объект предыдущей секции, с которой была выполнена прокрутка. Основные свойства:

    origin.index      // индекс предыдущей секции
origin.anchor     // якорь предыдущей секции (если используется)
origin.item       // HTML-элемент секции

  • destination – объект текущей секции, которая только что была загружена. Основные свойства:

    destination.index
destination.anchor
destination.item

  • direction – строка "up" или "down", указывающая направление прокрутки.

Основные сценарии использования

1. Активация анимаций при входе в секцию

После загрузки секции часто требуется запуск анимаций или добавление классов:

afterLoad: function(origin, destination, direction){
    const section = destination.item;
    section.classList.add('animate');
}

Использование destination.item позволяет точно управлять конкретной секцией без необходимости поиска её через селекторы.

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

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

afterLoad: function(origin, destination, direction){
    const lazyImages = destination.item.querySelectorAll('[data-src]');
    lazyImages.forEach(img => {
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
    });
}

Такой подход позволяет сократить время первичной загрузки страницы и экономит трафик.

3. Изменение состояния элементов интерфейса

Можно управлять состоянием навигации, подсветкой пунктов меню и другими визуальными индикаторами:

afterLoad: function(origin, destination, direction){
    const menuItems = document.querySelectorAll('.menu-item');
    menuItems.forEach(item => item.classList.remove('active'));
    const activeItem = document.querySelector(`.menu-item[data-index="${destination.index}"]`);
    if(activeItem) activeItem.classList.add('active');
}

Особенности работы с якорями

Если секции имеют атрибут data-anchor, afterLoad позволяет синхронизировать URL с текущей секцией:

afterLoad: function(origin, destination, direction){
    history.replaceState(null, null, '#' + destination.anchor);
}

Это особенно полезно при реализации динамических ссылок и для возможности прямого перехода к конкретной секции.

Совместное использование с другими событиями

afterLoad часто применяется вместе с:

  • onLeave – вызывается до начала прокрутки, позволяет управлять переходами и отменять их при необходимости.
  • afterRender – вызывается один раз после рендера страницы, для начальной инициализации элементов.

Пример комбинирования:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        origin.item.classList.remove('highlight');
    },
    afterLoad: function(origin, destination, direction){
        destination.item.classList.add('highlight');
    }
});

Практические рекомендации

  • Всегда использовать destination.item вместо прямых селекторов для оптимальной производительности.
  • Проверять наличие элементов перед их модификацией, чтобы избежать ошибок JavaScript.
  • Для тяжелых анимаций или сложных операций использовать requestAnimationFrame внутри afterLoad для плавности работы.
  • Направление direction может быть полезно для различной анимации при скролле вверх или вниз.

Примеры продвинутого использования

Появление блоков по очереди при загрузке секции:

afterLoad: function(origin, destination, direction){
    const items = destination.item.querySelectorAll('.fade-in');
    items.forEach((el, index) => {
        setTimeout(() => el.classList.add('visible'), index * 200);
    });
}

Запуск видео только на активной секции:

afterLoad: function(origin, destination, direction){
    const videos = document.querySelectorAll('video');
    videos.forEach(v => v.pause());
    const activeVideo = destination.item.querySelector('video');
    if(activeVideo) activeVideo.play();
}

afterLoad является фундаментальным инструментом для создания интерактивных и динамических страниц с fullPage.js, предоставляя полный контроль над действиями после завершения прокрутки и визуализации секций.

Оглавление