Ленивая загрузка

Ленивая загрузка (lazy loading) в контексте Tippy.js — это механизм отложенного создания всплывающих подсказок до момента, когда они реально понадобятся. Такой подход позволяет оптимизировать производительность страницы, особенно если элементов с подсказками много, а пользователи взаимодействуют лишь с частью из них.

Принципы работы

По умолчанию Tippy.js создает все тултипы при инициализации. При больших DOM-деревьях это может привести к увеличению времени загрузки страницы и повышенному потреблению памяти. Ленивая загрузка решает эту проблему за счёт отложенного создания экземпляров.

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

  • Tippy.js может создавать тултипы «на лету» при наведении или фокусе.
  • Отложенные тултипы не занимают ресурсы до момента активации.
  • Можно комбинировать с динамическим контентом, подгружаемым через AJAX или асинхронные функции.

Настройка ленивой загрузки

Основной способ реализации ленивой загрузки — использование опции lazy: true. Она указывает библиотеке, что тултип должен инициализироваться только при первом взаимодействии с элементом.

tippy('.lazy-button', {
  content: 'Отложенный тултип',
  lazy: true,
});

После первого события (обычно mouseenter или focus) тултип создается, и все его параметры начинают действовать как обычно.

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

Часто тултип содержит контент, который загружается асинхронно. Для этого в Tippy.js применяется функция onShow, которая вызывается перед отображением тултипа.

tippy('.async-button', {
  content: 'Загрузка...',
  lazy: true,
  onShow(instance) {
    if (!instance.props.contentFetched) {
      fetch('/tooltip-content')
        .then(response => response.text())
        .then(data => {
          instance.setContent(data);
          instance.props.contentFetched = true;
        });
    }
  }
});

Пояснения:

  • contentFetched используется для предотвращения повторной загрузки.
  • setContent динамически заменяет содержимое тултипа после получения данных.

Отложенная инициализация с делегированием

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

tippy.delegate(document.body, {
  target: '.tooltip-item',
  content(reference) {
    return reference.getAttribute('data-tooltip');
  },
  lazy: true,
});

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

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

Комбинация с render для сложных тултипов

Для сложных тултипов с кастомной разметкой часто используют функцию render. В сочетании с ленивой загрузкой это позволяет полностью отложить создание DOM-элементов до момента показа.

tippy('.custom-tooltip', {
  lazy: true,
  render(reference) {
    const box = document.createElement('div');
    box.className = 'tippy-box custom';
    box.innerHTML = `<strong>${reference.dataset.title}</strong>`;
    return {
      popper: box,
      onUpdate() {},
      onDestroy() {},
    };
  },
});

Особенности подхода:

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

Настройка событий для ленивых тултипов

Для ленивых тултипов важно корректно настроить события активации:

  • mouseenter — стандартное наведение мыши.
  • focus — для клавиатурной навигации.
  • click — для элементов, активируемых кликом.
  • Можно комбинировать несколько событий через trigger: 'mouseenter focus'.
tippy('.lazy-mixed', {
  lazy: true,
  trigger: 'mouseenter focus click',
  content: 'Тултип с несколькими триггерами',
});

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

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

  • Не создавайте тултипы на всех элементах сразу, если их количество велико.
  • Используйте делегирование и ленивую загрузку для больших списков.
  • Для динамического контента храните состояние загрузки, чтобы избежать лишних запросов.
  • Комбинируйте lazy с render для тяжелых тултипов с кастомным DOM.

Ленивая загрузка в Tippy.js позволяет сохранять высокую производительность страницы даже при наличии сотен элементов с подсказками, уменьшает нагрузку на память и ускоряет интерактивность интерфейса.

Оглавление