afterRender

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

Подключение afterRender

Для использования события afterRender необходимо передавать его в объект настроек при инициализации fullPage.js:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    afterRender: function(origin, destination, direction){
        console.log("fullPage полностью загружен и готов к взаимодействию");
    }
});

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

  • afterRender вызывается один раз после первоначальной отрисовки страницы.
  • Параметры origin, destination и direction в afterRender в текущей версии могут быть undefined — основная задача события — сигнализировать о полной загрузке интерфейса.
  • Идеально подходит для запуска скриптов, которые манипулируют DOM, например, анимаций, добавления дополнительных элементов или инициализации сторонних библиотек.

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

1. Инициализация сторонних плагинов

Если требуется интеграция с библиотеками анимаций, слайдеров или графиков, важно убедиться, что все секции fullPage.js уже присутствуют в DOM:

afterRender: function(){
    // Инициализация слайдера внутри первой секции
    const swiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: {
            delay: 3000
        }
    });

    // Запуск анимации элементов
    document.querySelectorAll('.animate-on-load').forEach(el => {
        el.classList.add('active');
    });
}

2. Настройка навигационных элементов

FullPage.js создает навигацию, стрелки и другие интерфейсные элементы. Если необходимо модифицировать их после загрузки:

afterRender: function(){
    const navDots = document.querySelectorAll('#fp-nav ul li a');
    navDots.forEach(dot => dot.title = 'Перейти к секции');
}

3. Динамическая подгрузка контента

В некоторых проектах контент секций подгружается через AJAX. После afterRender можно безопасно вставлять дополнительный HTML или скрипты:

afterRender: function(){
    fetch('/api/section-content')
        .then(res => res.text())
        .then(html => {
            document.querySelector('.section-3').innerHTML = html;
        });
}

Отличия afterRender от других коллбеков

Коллбек Когда вызывается Особенности использования
afterRender После полной инициализации fullPage.js Один раз, после отрисовки всех секций
afterLoad Каждый раз при переходе на новую секцию Получает параметры origin, destination
onLeave Перед уходом со страницы или секции Позволяет блокировать переход или запускать анимации

Важно: afterRender не срабатывает при динамическом добавлении секций через fullpage_api.addSection() — для таких сценариев необходимо использовать дополнительные коллбеки или вручную инициализировать функции после вставки секций.

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

  • Если в секциях используются CSS-анимации или JS-анимации, запускать их рекомендуется именно в afterRender. Это предотвращает «подмигание» элементов или некорректное вычисление размеров.
  • Для анимаций, зависящих от размеров окна, лучше комбинировать afterRender с событиями resize:
afterRender: function(){
    function resizeHandler(){
        const sections = document.querySelectorAll('.section');
        sections.forEach(sec => sec.style.height = window.innerHeight + 'px');
    }

    resizeHandler();
    window.addEventListener('resize', resizeHandler);
}

Советы по оптимизации

  1. Минимизировать тяжелые операции: все тяжелые скрипты после afterRender могут замедлить первичную отрисовку страницы.
  2. Использовать делегирование событий: если элементы создаются динамически в afterRender, применяйте делегирование для кликов или ховер-эффектов.
  3. Синхронизация с другими коллбеками: если анимации зависят от переходов между секциями, комбинируйте afterRender с afterLoad и onLeave для плавного взаимодействия.

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

Оглавление