Бесконечная прокрутка галереи

Бесконечная прокрутка является важной частью современных веб-приложений и активно используется в различных галереях, каталогах и визуальных интерфейсах. Она позволяет пользователю просматривать контент, не прерываясь на переходы между страницами или загрузки новых данных. В этой статье рассмотрим, как с помощью библиотеки BasicLightbox реализовать бесконечную прокрутку для галереи изображений.

Основные принципы работы

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

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

Подключение библиотеки BasicLightbox

Для начала нужно подключить библиотеку в проект. Это можно сделать через CDN:

<head>
  <link href="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.4/dist/basicLightbox.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/basiclightbox@5.0.4/dist/basicLightbox.min.js"></script>
</head>

Если требуется использовать библиотеку через npm, можно установить её в проект:

npm install basiclightbox

Затем подключить в скрипте:

import basicLightbox from 'basiclightbox';

Структура галереи

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

<div id="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- ... -->
</div>

Каждое изображение в галерее будет clickable, и при клике будет открываться в модальном окне с помощью библиотеки BasicLightbox.

Открытие изображений в модальном окне

Модальное окно для отображения изображения можно создать следующим образом:

const images = document.querySelectorAll('#gallery img');

images.forEach(image => {
  image.addEventListener('click', () => {
    const instance = basicLightbox.create(`
      <img src="${image.src}" alt="${image.alt}">
    `);
    instance.show();
  });
});

Этот код добавляет обработчик клика на каждое изображение в галерее. При клике открывается модальное окно с изображением.

Бесконечная прокрутка

Чтобы реализовать бесконечную прокрутку, нужно отслеживать положение прокрутки в модальном окне и подгружать новые изображения по мере достижения конца галереи. Для этого можно использовать событие scroll на окне браузера.

Для демонстрации добавим в код возможность подгрузки изображений при достижении конца текущего списка:

let currentIndex = 0; // Индекс текущего изображения

function loadNextImage() {
  const images = document.querySelectorAll('#gallery img');
  
  if (currentIndex >= images.length) {
    // Если все изображения уже загружены, можно прекратить загрузку.
    return;
  }

  const nextImage = images[currentIndex];
  currentIndex++;

  const instance = basicLightbox.create(`
    <img src="${nextImage.src}" alt="${nextImage.alt}">
  `);
  instance.show();
}

// Запускаем подгрузку при достижении конца
window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY + window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  if (scrollPosition >= documentHeight - 100) {
    loadNextImage();
  }
});

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

Оптимизация подгрузки

Для более плавной работы и оптимизации подгрузки изображений можно использовать Intersection Observer API. Этот API позволяет отслеживать, когда элемент становится видимым в области видимости, что идеально подходит для реализации бесконечной прокрутки.

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadNextImage();
      observer.unobserve(entry.target); // Прекращаем наблюдение за текущим элементом
    }
  });
}, { rootMargin: '100px' });

const lastImage = document.querySelector('#gallery img:last-child');
observer.observe(lastImage);

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

Загрузка изображений с сервера

Для подгрузки изображений с сервера вместо использования статических изображений можно настроить AJAX-запросы или работать с API. Например, при достижении конца страницы можно отправить запрос на сервер и получить список новых изображений.

Пример загрузки изображений с сервера:

async function loadImagesFromServer() {
  const response = await fetch('/api/images');
  const data = await response.json();
  
  const gallery = document.getElementById('gallery');
  
  data.images.forEach(image => {
    const imgElement = document.createElement('img');
    imgElement.src = image.url;
    imgElement.alt = image.alt;
    gallery.appendChild(imgElement);
  });
}

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

Заключение

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

Оглавление