Placeholder для изображений

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

После подключения создается контейнер для элементов сетки, например:


  
Image 1

  
Image 2

  
Image 3

Инициализация выполняется следующим образом:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-item'
  }
});

Ключевые моменты инициализации:

  • itemSelector — селектор элементов внутри контейнера, которые будут участвовать в сетке.
  • layoutMode — режим расположения (masonry, fitRows, vertical). Masonry позволяет создавать сетку с переменной высотой элементов.
  • percentPosition — если включено, размеры элементов вычисляются в процентах, что важно для адаптивного дизайна.
  • masonry.columnWidth — задает ширину колонки, можно указать селектор элемента или число в пикселях.

Использование placeholder для изображений

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

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

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


  Image

JavaScript для замены placeholder на реальное изображение:

var gridItems = document.querySelectorAll('.grid-item img');

gridItems.forEach(function(img) {
  var realSrc = img.getAttribute('data-src');
  var newImg = new Image();
  newImg.src = realSrc;
  newImg.onl oad = function() {
    img.src = realSrc;
    iso.layout(); // обновление сетки после загрузки изображения
  }
});

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

  • data-src хранит настоящий URL изображения.
  • Создается новый объект Image, чтобы дождаться полной загрузки, прежде чем вставлять изображение в DOM.
  • Вызов iso.layout() после загрузки гарантирует правильное расположение элементов в сетке.

Фильтрация и сортировка с placeholder

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

Пример фильтрации:

var filterButtons = document.querySelectorAll('.filter-button-group button');

filterButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    var filterValue = button.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
});

Замечания:

  • После каждой фильтрации или сортировки placeholder должен быть заменен на реальное изображение, иначе сетка будет «пустой».
  • Можно предварительно загружать все изображения через JavaScript или использовать библиотеки вроде imagesLoaded для отслеживания полной загрузки.
imagesLoaded('.grid', function() {
  iso.layout();
});

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

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

  • Адаптивность: задавая percentPosition: true, сетка автоматически перестраивается при изменении ширины окна. Placeholder сохраняет место до загрузки изображения.
  • Ленивая загрузка: изображения загружаются только при появлении в видимой области. Placeholder обеспечивает непрерывность макета и предотвращает «скачки» сетки.

Пример реализации ленивой загрузки с Isotope:

var lazyImages = document.querySelectorAll('.grid-item img[data-src]');

var observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      var img = entry.target;
      img.src = img.dataset.src;
      img.onl oad = function() {
        iso.layout();
      }
      observer.unobserve(img);
    }
  });
}, { threshold: 0.1 });

lazyImages.forEach(function(img) {
  observer.observe(img);
});

Настройка анимаций при замене placeholder

Isotope поддерживает плавные переходы при изменении положения элементов. Для этого используется CSS-свойство transition:

.grid-item {
  transition: transform 0.4s, opacity 0.4s;
}

При подгрузке реального изображения можно добавить эффект появления:

.grid-item img {
  opacity: 0;
  transition: opacity 0.5s;
}

.grid-item img.loaded {
  opacity: 1;
}

JavaScript для активации эффекта:

newImg.onl oad = function() {
  img.src = realSrc;
  img.classList.add('loaded');
  iso.layout();
}

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

Оглавление