Добрый день, помогите правильно сделать связку Ion.RangeSlider + Isotope + LazyLoad для фильтрации и вывода контента.
За основу был взят
пример из
данного топика по привязке noUiSlider.
Как смог переделал на Ion.RangeSlider, потому что он выводит сразу всю нужную информацию и смотрится шикарно =)
Живой пример на jsdiddle не претендует на звание красивого кода... К сожалению, не очень силен в этом.
Суть работы:
Три слайдера, в зависимости от выбранных значений фильтруют и водят нужные изображения.
Описание элемента
<div class="grid-item">
<img src="" class="lazy" data-original="http://placehold.it/100x100" />
<p class="id">1</p>
<!-- Параметр для слайдера 1 -->
<p class="size-max">46</p>
<!-- Параметр для слайдера 2 -->
<p class="size-min">40</p>
<!-- Параметр для слайдера 3 -->
<p class="region">0</p>
</div>
Проблемы:
- Самая большая проблема это парсинг документа для поиска элементов в диапазоне в функции multipleFilter()... Когда элементов было 100 это было еще рабочим решением, но никто не знал что это не все данные... И сейчас их стало чуть больше трех тысяч... да, да 3000 Карл!... При таком парсинге Dom строится за 5 секунд (ужос). Что с этим делать, как оптимизировать find()?
- Вторая проблема, lazyload подгружает ВСЕ картинки после загрузки страницы, а не по требованию, т.е. не те что отфильтрованы и должны быть выведены через isotope. Отдельный пример на связку Isotope + Lazyload на jsfiddle.
- Третье, что при всех этих проблемах... вся страница подгружается за 30 сек и конечно это дикий ужос...
Пробовал отказаться от вывода значения из слайдера на страницу xxx.html(data.from), в принципе это ненужно, а сразу передавать значение в переменную в фильтр.. но это не спасает от задумчивости парсинга такого количества элементов...
Возможно это был не оптимальный путь, может быть есть какие-то другие решения?
В тупике, надеюсь на помощь профессионалов в этой области.
P.S. Заменил пример, Dom грузится быстрее, но LazyLoad так и не работает =(
P.S... Что-то оказывается и неверно фильтруется..
Простой
