Скролл-слайдер на большое количество изображений?

Question

[Александр Л]

Приветствую.
Есть задача сделать слайдер с полосой прокрутки на 1000+ изображений (фото томографии предмета).
Нашел вроде бы подходящее решение на тостере (jsfiddle.net/Deonis/rq6bv53r/), но проблема в торможении при скролле в chrome. Пришлось уменьшить количество в 3 раза. Может быть есть более оптимальное решение этой задачи?

Comments

[Дмитрий Кузнецов]

Браузер "глючит" из-за большого количества кода. Плюс к этому у вас скорей всего изображения загружаются одновременно, а не при запросе к самому изображению (lazyload вроде называется).

[Froggyweb]

Не это явная лаба и надо писать ручками. Лучше наверное canvas использовать тормозов будет меньше

Answer 1

[Максим Тимофеев]

Ajax-ом грузить по мере прокручивания, при этом удаляя старые.
берете слайдер с api типа kenwheeler.github.io/slick
там есть методы slickAdd и slickRemove
Допустим грузите сразу 15 фоток, при прокрутке каждых 5-ти (цепляемся за событие afterChange и проверяем index элемента) отправляете ajax получаете еще 5 перебираете добавляете и удаляете первые 5. Итого в dom будет не более 15 фоток, и не будет тормозить.

У него есть конечно Lazy Loading, можно попробовать, но там принцип другой, просто сами фото не сразу грузятся. А получается кол-во элементов в дом будет 1000+, что может все равно тормозить. Но стоит проверить, если с ajax заморачиваться не охота.