Отключение на мобильных устройствах

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

Определение устройства

Первый шаг — выявление мобильной платформы. В JavaScript это чаще всего реализуется через window.innerWidth или проверку user-agent. Более точным и современным подходом является использование медиазапросов через Jav * aScript:

function isMobile() {
  return window.matchMedia("(max-width: 768px)").matches;
}

Здесь значение 768px соответствует стандартной границе между планшетами и десктопами. Функцию можно использовать для условного включения или отключения Isotope.

Инициализация Isotope с условием

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

let iso;

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

Ключевой момент — переменная iso объявляется вне блока, чтобы в дальнейшем можно было обращаться к объекту Isotope, если потребуется динамическое включение или отключение.

Динамическое включение и отключение при изменении размера окна

Пользователь может изменить размер окна браузера или повернуть устройство. Для корректной работы необходимо отслеживать событие resize и включать или отключать Isotope по мере необходимости:

let iso;
let isotopeInitialized = false;

function handleIsotope() {
  if (!isMobile() && !isotopeInitialized) {
    iso = new Isotope('.grid', {
      itemSelector: '.grid-item',
      layoutMode: 'masonry',
      percentPosition: true,
      masonry: {
        columnWidth: '.grid-sizer'
      }
    });
    isotopeInitialized = true;
  } else if (isMobile() && isotopeInitialized) {
    iso.destroy();
    isotopeInitialized = false;
  }
}

window.addEventListener('resize', handleIsotope);
handleIsotope();

Особенности кода:

  • Флаг isotopeInitialized предотвращает повторную инициализацию Isotope при каждом событии resize.
  • Метод destroy() полностью отключает Isotope, возвращая элементы в их исходное положение.
  • Код работает при начальной загрузке страницы и при изменении размеров окна.

Использование альтернативной сетки на мобильных устройствах

На мобильных устройствах рекомендуется применять стандартные CSS-сетки или flexbox. После вызова iso.destroy() элементы продолжают следовать стилям, заданным в CSS:

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grid-item {
  flex: 1 1 calc(50% - 10px);
}

Такой подход снижает нагрузку на браузер и обеспечивает адаптивность без дополнительной JavaScript-логики.

Учет фильтров и сортировки

Если на десктопе используется фильтрация или сортировка с помощью Isotope, при отключении на мобильных устройствах эти функции необходимо реализовать через простую манипуляцию классами:

function filterGrid(filterClass) {
  const items = document.querySelectorAll('.grid-item');
  items.forEach(item => {
    if (filterClass === 'all' || item.classList.contains(filterClass)) {
      item.style.display = '';
    } else {
      item.style.display = 'none';
    }
  });
}

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

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

  • Минимизировать количество элементов на мобильной версии или использовать ленивую загрузку.
  • Отключать анимации Isotope (transitionDuration: 0) при необходимости ускорения работы.
  • Кэшировать селекторы DOM вне функций resize для уменьшения повторного поиска элементов.

Итоговая структура кода

Полная схема отключения Isotope на мобильных устройствах с динамическим включением на десктопе выглядит следующим образом:

let iso;
let isotopeInitialized = false;

function isMobile() {
  return window.matchMedia("(max-width: 768px)").matches;
}

function handleIsotope() {
  if (!isMobile() && !isotopeInitialized) {
    iso = new Isotope('.grid', {
      itemSelector: '.grid-item',
      layoutMode: 'masonry',
      percentPosition: true,
      masonry: {
        columnWidth: '.grid-sizer'
      }
    });
    isotopeInitialized = true;
  } else if (isMobile() && isotopeInitialized) {
    iso.destroy();
    isotopeInitialized = false;
  }
}

window.addEventListener('resize', handleIsotope);
handleIsotope();

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

Оглавление