Индикаторы загрузки

Isotope — это мощная библиотека для динамического отображения и фильтрации элементов на веб-странице. Для работы с индикаторами загрузки необходимо сначала корректно подключить библиотеку. Стандартный способ — использование CDN или локальной копии скрипта и стилей:

<link rel="stylesheet" href="path/to/isotope.css">
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

После подключения создается контейнер с элементами, который будет управляться Isotope. Структура HTML обычно выглядит так:

<div class="grid">
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
  <div class="grid-item">Элемент 3</div>
</div>

Инициализация Isotope производится через Jav * aScript:

var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

Использование индикаторов загрузки

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

<div id="loader">Загрузка...</div>
<div class="grid hidden">
  <div class="grid-item"><img src="image1.jpg" alt=""></div>
  <div class="grid-item"><img src="image2.jpg" alt=""></div>
</div>

CSS-класс .hidden скрывает контейнер до завершения загрузки:

.hidden {
  display: none;
}
#loader {
  text-align: center;
  font-size: 18px;
  padding: 20px;
}

Отслеживание загрузки изображений

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

var grid = document.querySelector('.grid');
var loader = document.getElementById('loader');

imagesLoaded(grid, function() {
  loader.style.display = 'none';
  grid.classList.remove('hidden');

  var iso = new Isotope(grid, {
    itemSelector: '.grid-item',
    layoutMode: 'fitRows'
  });
});

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

Динамическая подгрузка элементов

Для работы с динамически добавляемыми элементами индикатор загрузки может использоваться повторно. Пример подгрузки новых элементов через AJAX:

function loadMoreItems(url) {
  var loader = document.getElementById('loader');
  loader.style.display = 'block';

  fetch(url)
    .then(response => response.text())
    .then(data => {
      var tempDiv = document.createElement('div');
      tempDiv.innerHTML = data;
      var items = tempDiv.querySelectorAll('.grid-item');

      grid.append(...items);

      imagesLoaded(grid, function() {
        loader.style.display = 'none';
        iso.appended(items);
        iso.layout();
      });
    });
}

Здесь индикатор отображается до полной загрузки новых элементов, после чего сетка обновляется через методы appended и layout.

Анимация индикатора загрузки

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

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#loader::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin: 10px auto;
  border: 5px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}

Такой подход делает процесс ожидания визуально понятным и улучшает UX.

Совмещение с фильтрацией и сортировкой

Индикаторы загрузки особенно важны при использовании фильтров и сортировки. Например, при фильтрации элементов с применением кнопок:

var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener('click', function(event) {
  if (!matchesSelector(event.target, 'button')) return;
  var filterValue = event.target.getAttribute('data-filter');

  loader.style.display = 'block';
  setTimeout(function() {  // имитация задержки загрузки
    iso.arrange({ filter: filterValue });
    loader.style.display = 'none';
  }, 500);
});

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

Практические советы

  • Всегда использовать imagesLoaded при работе с изображениями в сетках Isotope.
  • Для больших объемов контента лучше отображать прелоадер и при подгрузке новых элементов повторять его показ.
  • Для сложных анимаций можно комбинировать CSS-анимации с событиями Isotope (layoutComplete, arrangeComplete) для точного контроля отображения.
  • Минимизировать смещения контента, скрывая сетку до полной загрузки всех элементов, особенно при использовании режимов masonry или fitRows.

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

Оглавление