Как убрать фризы на странице при скролле при большом количестве слайдеров?
У меня каталог товаров, у каждой карточки слайдер owl , на странице выводится 10 штук, а остальные подгружаются по скроллу.
Чем больше товаров подгрузилось, тем сильнее становятся фризы страницы при скролле. Когда 60 карточек, становится тяжело пользоваться.
Вот из того что на уме на данный момент:
1. Где то читал, что можно слушать не каждый скролл, а каждый 5ый, но как это сделать - не нашел.
2. Есть идея отлавливать фокус у товаров которые на экране и для них инициализировать слайдер, а когда уходят из фокуса - деиницииализировать. Только не понимаю как это сделать.
Подскажите по моим идеям и\или предложите свои
Вот код инициализации слайдера, я его подгружаю вместе с контентом с каждым ajax запросом, чтобы слайдер работал с прилетевшими карточками.
1 — это называется троттлинг, throttle, только обычно делают таймер на блокировку вызова функции, а не счётчик попыток вызова.
2 — деинициализацией вообще мало какие библиотеки занимаются, даже удаление из DOM не гарантирует остановку ранее закреплённых скриптов на удаляемых элементах. По идее, должно быть достаточно скрыть "display:none"-ом весь контейнер со слайдером, чтобы браузер перестал его обсчитывать, но тут как повезёт с поведением слайдера после возвращения из "display:none".
1) не использовать owl, а написать кастомный слайдер, который может работать по одному и не грузить страницу
2) Не показывать сразу 60 слайдеров, а рендерить слайдеры только те, которые видит пользователь, остальные заменять пустыми дивами с размерами соответствующеми слайдеру.
1. Мне кажется, писать свой велосипед будет для меня слишком напряжно, тк скиллов не хватит.
2. То что вы описали можно сделать с owl, у каждого слайдера сделать свой id и управлять ими по отдельности. Или не получится?
А про пустые дивы, это как сделать?
Чаще всего использую slick-carousel, в плане производительности не тестировала https://kenwheeler.github.io/slick/
Как вариант чтобы было красиво нужно использовать progress-bar хотя бы примитивный при каждом обращении к серверу
