Метод refresh

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

Синтаксис

Waypoint.refreshAll();

Описание параметров:

  • refreshAll — статический метод, вызываемый на классе Waypoint. Он пересчитывает координаты всех существующих Waypoints на странице.
  • Метод не принимает аргументы и возвращает массив всех Waypoint-объектов после обновления, что позволяет выполнять дальнейшие операции с ними при необходимости.

Когда необходим refresh

В обычной ситуации Waypoints вычисляют положение элементов один раз при инициализации. Если страница статична, этого достаточно. Однако динамические изменения страницы могут привести к неправильной работе триггеров. Примеры ситуаций, когда требуется вызов refresh:

  1. Добавление новых элементов на страницу

    var newSection = document.createElement('div');
newSection.className = 'section';
document.body.appendChild(newSection);

Waypoint.refreshAll(); // пересчет всех Waypoints

  2. Изменение размеров существующих элементов При изменении высоты блока через CSS или JS Waypoints могут срабатывать раньше или позже положенного момента. Метод refresh корректирует положение триггеров:

    document.querySelector('.section').style.height = '500px';
Waypoint.refreshAll();

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

    const img = new Image();
img.src = 'large-image.jpg';
img.onl oad = function() {
    Waypoint.refreshAll();
}

Взаимодействие с отдельными Waypoint-объектами

Помимо глобального refreshAll, каждый Waypoint-инстанс имеет собственный метод refresh. Он пересчитывает только конкретный waypoint:

var waypoint = new Waypoint({
  element: document.getElementById('target'),
  handler: function(direction) {
    console.log('Waypoint сработал');
  }
});

waypoint.refresh(); // пересчет только этого элемента

Преимущества локального refresh:

  • Экономит ресурсы при большом количестве Waypoints.
  • Позволяет управлять только конкретными триггерами, не трогая остальные.

Алгоритм работы

При вызове refresh Waypoints выполняют следующие действия:

  1. Определяют текущее положение элемента относительно окна просмотра (viewport).
  2. Пересчитывают offset, который может быть задан как абсолютное значение или процент от высоты окна.
  3. Обновляют внутренние координаты триггеров.
  4. Обеспечивают корректное срабатывание handler-функций при последующей прокрутке.

Важно учитывать, что если вызов refresh осуществляется до полной загрузки контента (например, до DOMContentLoaded), пересчет может быть неточным, так как размеры элементов могут быть ещё не окончательно определены.

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

  • Вызывать после динамических изменений DOM — особенно после добавления, удаления или изменения размеров элементов.
  • Комбинировать с resize событием — если элементы на странице изменяются при изменении окна:
window.addEventListener('resize', function() {
    Waypoint.refreshAll();
});
  • Не злоупотреблять частыми вызовами — слишком частые обновления могут снижать производительность, особенно на страницах с большим количеством Waypoints.

Пример использования

// Инициализация нескольких Waypoints
var sections = document.querySelectorAll('.section');

sections.forEach(function(section) {
    new Waypoint({
        element: section,
        handler: function(direction) {
            console.log('Секция', section.id, 'сработала', direction);
        },
        offset: '50%'
    });
});

// Динамическая вставка нового блока
var newSection = document.createElement('div');
newSection.className = 'section';
newSection.id = 'section4';
document.body.appendChild(newSection);

// Пересчет всех Waypoints
Waypoint.refreshAll();

В этом примере добавленный блок автоматически становится частью системы Waypoints после вызова refreshAll.

Выводы по использованию метода

  • refresh — ключевой метод для поддержки динамических страниц.
  • Он обеспечивает точное срабатывание триггеров при изменении DOM и размеров элементов.
  • Применяется как глобально через Waypoint.refreshAll(), так и локально через waypoint.refresh().
  • Оптимальное использование требует сочетания с событиями загрузки и изменения размера окна для стабильной работы.

Метод refresh гарантирует, что система Waypoints остается актуальной и предсказуемой, независимо от того, как изменяется структура страницы.

Оглавление