Будет ли изотопная фильтрация работать хорошо с несколькими сотнями элементов и несколькими категориями?

Question

Я надеюсь использовать плагин Isotope Jquery (http://isotope.metafizzy.co/) для отображения и фильтрации нескольких сотен элементов (около 700). Каждый элемент будет содержать миниатюру изображения и имя и будет фильтроваться по трем категориям. (Для остановкистраница до смешного длинна, все это будет содержаться в прокручиваемом элементе div).

Если возможно, я бы хотел также включить эффект анимации (используя «лучший из доступных» механизм анимации, который упадетвернуться к JS, если переходы CSS3 недоступны).

Я протестировал его локально с примерно 100 элементами, и он очень быстро работает в Chrome, и анимации CSS3 и JS довольно быстрые. Но я беспокоюсь, чтов более ранних стадиях это может оказаться необычайно медленным для старых клиентов и браузеров (и, конечно, очень сжатые сроки, поэтому не так много времени для создания лучшего прототипа!).

У кого-нибудь естьопыт использования его в подобных масштабах?

Спасибо,

Петр

Answer 1

Я бы порекомендовал, чтобы количество ваших предметов было не более 50, если вы выполняете фильтрацию или сортировку. Это не значит, что вы можете попытаться подтолкнуть его. Например, количество элементов Leafly близко к 300.

Answer 2

Хорошо, теперь я могу ответить на свой вопрос, потому что мы пытались его построить.Ответ был слишком медленным во всех браузерах, кроме Chrome, где это было почти приемлемо.Даже в Firefox на быстром ноутбуке Mac загрузка страницы с нуля занимала примерно 5 секунд, и не намного меньше, чтобы заменить фильтры на «все».Он даже выдал предупреждение о не отвечающем сценарии для пары людей, которые проверили его в Safari и IE.

Так что я переписал его, просто вместо этого просто добавив / удалив класс 'hide' для каждого элемента.При быстром сравнении это примерно на 50% быстрее.Очевидно, что это теряет всю причудливую анимацию, хотя.Поэтому я бы порекомендовал Isotope для небольших наборов данных, где важны эффектные визуальные эффекты, но не для работы с сотнями элементов.