Стратегии обновления

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

Основной метод для обновления fullPage.js — это fullpage_api.reBuild(). Он пересчитывает размеры всех секций и слайдов, заново привязывает события скролла и обновляет внутренние индексы. Используется в случаях, когда:

  • изменяется высота или ширина секций;
  • добавляются или удаляются слайды внутри секции;
  • изменяется контент, влияющий на размеры блоков.
// Пример использования
fullpage_api.reBuild();

Метод не требует перезагрузки страницы, но полностью пересоздаёт внутренние структуры библиотеки, что может быть затратным для производительности при частых вызовах.

Динамическое добавление и удаление секций

FullPage.js поддерживает динамическое управление структурой с помощью методов addSection, removeSection и аналогичных для слайдов (addSlide, removeSlide). Эти методы автоматически обновляют индексы и внутренние состояния без необходимости вызова reBuild() после каждого действия.

// Добавление новой секции
fullpage_api.addSection('<div class="section">Новая секция</div>', 2); // вставка на позицию 2

// Удаление секции
fullpage_api.removeSection(3); // удаляет третью секцию

Важно учитывать, что при добавлении или удалении секций с анимацией или большим количеством контента следует вызвать fullpage_api.reBuild() после всех изменений, чтобы гарантировать корректное позиционирование и плавный скролл.

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

FullPage.js предоставляет встроенные опции для адаптивного поведения через responsiveWidth и responsiveHeight. Однако при динамическом изменении размеров окна или контейнера необходимо вручную пересчитывать размеры с помощью:

window.addEventListener('resize', () => {
    fullpage_api.reBuild();
});

Также можно использовать метод fullpage_api.setAutoScrolling(true/false) для переключения между режимами скролла при изменении условий отображения.

Управление контентом внутри слайдов

Для обновления слайдов внутри секции используется метод updateSlide(), который пересчитывает размеры слайдов и корректирует смещение активного слайда.

// Пример обновления слайдов в секции
fullpage_api.updateSlide(1, '<div class="slide">Обновлённый контент</div>');

Если контент слайда включает медиа (изображения или видео), которые загружаются асинхронно, следует вызвать reBuild() после полной загрузки медиа, чтобы fullPage.js корректно вычислил размеры и центровку.

Оптимизация частых обновлений

Частые вызовы reBuild() могут снижать производительность, особенно на мобильных устройствах. Чтобы оптимизировать процесс:

  • группировать изменения DOM и вызывать reBuild() один раз после всех манипуляций;
  • использовать afterRender и afterResize колбэки для запуска обновлений только при необходимости;
  • при добавлении медиа контента использовать событие load для вызова обновления.
window.addEventListener('load', () => {
    fullpage_api.reBuild();
});

Использование колбэков для автоматического обновления

FullPage.js предоставляет несколько колбэков, позволяющих автоматически реагировать на изменения:

  • afterLoad — срабатывает после активации секции;
  • afterSlideLoad — после активации слайда;
  • afterResize — после изменения размеров окна;
  • onLeave — перед переходом на другую секцию.

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

Итоговая стратегия обновления

Для устойчивого и гибкого управления структурой fullPage.js рекомендуется:

  1. Использовать методы addSection и addSlide для динамического контента.
  2. Вызывать reBuild() после массовых изменений размеров или добавления/удаления множества секций и слайдов.
  3. Применять события load и resize для корректной работы с медиа и адаптивными элементами.
  4. Использовать колбэки fullPage.js для минимизации частоты обновлений и оптимизации производительности.

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

Оглавление