@frie666

Как убрать фризы на странице при скролле при большом количестве слайдеров?

У меня каталог товаров, у каждой карточки слайдер owl , на странице выводится 10 штук, а остальные подгружаются по скроллу.
Чем больше товаров подгрузилось, тем сильнее становятся фризы страницы при скролле. Когда 60 карточек, становится тяжело пользоваться.

Вот из того что на уме на данный момент:
1. Где то читал, что можно слушать не каждый скролл, а каждый 5ый, но как это сделать - не нашел.

2. Есть идея отлавливать фокус у товаров которые на экране и для них инициализировать слайдер, а когда уходят из фокуса - деиницииализировать. Только не понимаю как это сделать.

Подскажите по моим идеям и\или предложите свои

Вот код инициализации слайдера, я его подгружаю вместе с контентом с каждым ajax запросом, чтобы слайдер работал с прилетевшими карточками.

$(".owl-carousel").owlCarousel({
items: 1,
slideBy: 1,
loop: true,
dots: !1,
nav: !0,
navText: ["", ""],
navClass: ["swiper-button-prev", "swiper-button-next"],
lazyLoad: true,
lazyLoadEager:1,
checkVisibility: false,
animateIn:'fadeIn',
});
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ответы на вопрос 2
1) не использовать owl, а написать кастомный слайдер, который может работать по одному и не грузить страницу
2) Не показывать сразу 60 слайдеров, а рендерить слайдеры только те, которые видит пользователь, остальные заменять пустыми дивами с размерами соответствующеми слайдеру.
Ответ написан
@CoderSoft
Чаще всего использую slick-carousel, в плане производительности не тестировала
https://kenwheeler.github.io/slick/
Как вариант чтобы было красиво нужно использовать progress-bar хотя бы примитивный при каждом обращении к серверу
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы