Как использовать отложенную загрузку изображений в слайдерах?

Question

[Павел]

я использую Lazy Load , в целом меня устраивает , но в слайдерах это не работает (только для первого слайда) , а дальше если листать надо снова скролить страницу туда сюда для того чтоб картинка начала подгружаться.
В частности у меня slick слайдер , подскажите как к нему применить отложенную загрузку?

Answer 1

[Денис Денис]

пример из документации slick

// To use lazy loading, set a data-lazy attribute
// on your img tags and leave off the src

<img data-lazy="img/lazyfonz1.png"/>

$('.lazy').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1
});

Comments

[Marsin]

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

Answer 2

[Егор Живагин]

+к вышесказаному
А если не нравится, поставь
lazyLoad: 'progressive' ,

Разница в том, что ondemand начинает подгружать слайдеры только тогда, когда они становятся активными. А progressive - сразу после того, как прогрузится страница.

Answer 3

[Nayro TV]

Пропиши не
data-lazy=/img/pic4.webp"
a
data-lazy=./img/pic4.webp"
точка перед слеш