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

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

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

Ленивая загрузка в Unpoly строится на механизме целевых фрагментов (target) и событий навигации (up.*). Вместо того чтобы подгружать весь контент сразу, можно определить контейнеры, которые будут заполняться по мере необходимости.

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

  • Контейнер с up-target или селектором, переданным в up.replace/up.append.
  • Запрос к серверу происходит только при определённом событии: клик, прокрутка или явный вызов up.request.
  • Ответ сервера содержит только HTML нужного фрагмента, что уменьшает объём передаваемых данных.

Использование up.request

Метод up.request позволяет программно инициировать загрузку контента в указанный контейнер:

up.request('/comments', { target: '#comments-section' })
  .then(response => {
    console.log('Комментарии загружены');
  })
  .catch(error => {
    console.error('Ошибка загрузки комментариев', error);
  });

Параметры:

  • url — адрес запроса.
  • target — селектор контейнера, куда будет вставлен HTML.
  • method — HTTP-метод (GET по умолчанию).
  • params — дополнительные параметры запроса.

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

Для динамической подгрузки при скролле применяют событие scroll или библиотечные расширения типа up.fragment:visible. Пример:

up.on('fragment:visible', '#infinite-list', (event) => {
  let container = event.target;
  if (!container.dataset.loaded) {
    up.request('/load-more', { target: container })
      .then(() => { container.dataset.loaded = 'true'; });
  }
});

Особенности:

  • Проверка dataset.loaded предотвращает повторные запросы.
  • Событие fragment:visible срабатывает, когда элемент появляется в зоне видимости.
  • Сервер возвращает только новые элементы списка, которые вставляются внутрь контейнера.

Динамическая подгрузка форм и интерактивных компонентов

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

<button up-target="#user-form" up-href="/user-form" up-on="click">Показать форму</button>
<div id="user-form"></div>

Здесь Unpoly автоматически:

  • отправляет GET запрос на /user-form при клике;
  • заменяет содержимое контейнера #user-form на ответ сервера;
  • сохраняет обработчики событий и анимацию по умолчанию.

Можно добавить дополнительные опции:

<button up-target="#user-form" 
        up-href="/user-form" 
        up-transition="fade" 
        up-swap="outerHTML">Загрузить форму</button>
  • up-transition — плавная анимация появления.
  • up-swap — определяет способ вставки контента (outerHTML, innerHTML, after, before).

Интеграция с кешированием

Чтобы уменьшить количество запросов при ленивой загрузке, Unpoly поддерживает кеширование фрагментов:

up.request('/notifications', { target: '#notifications', cache: true });
  • Если фрагмент уже был загружен, он извлекается из кеша, а запрос на сервер не выполняется.
  • Можно комбинировать с up.reload для обновления только при необходимости.

События для управления загрузкой

Unpoly предоставляет набор событий для контроля ленивой загрузки:

  • up:request — перед отправкой запроса.
  • up:success — после успешного получения HTML.
  • up:fail — при ошибке запроса.
  • up:fragment:loaded — когда HTML фрагмента вставлен на страницу.

Пример с логированием и обработкой ошибок:

up.on('up:request', '#lazy-container', (event) => {
  console.log('Запрос ленивой загрузки начат');
});

up.on('up:fail', '#lazy-container', (event) => {
  console.error('Ошибка при загрузке фрагмента');
});

Советы по организации ленивой загрузки

  1. Минимизировать начальный HTML — загружать только видимые элементы.
  2. Использовать up-target и up-href для кнопок и ссылок — это упрощает логику.
  3. Избегать повторных запросов — проверять флаги или кеш.
  4. Разделять фрагменты на логические блоки — каждый фрагмент загружается отдельно.
  5. Использовать анимации для плавного появления контента, что улучшает UX.

Ленивая загрузка в Unpoly позволяет создавать динамические, отзывчивые интерфейсы без полной перезагрузки страниц, делая приложения более лёгкими, быстрыми и удобными для пользователя.

Оглавление