lazyLoad working with progressive but not with ondemand

[blinkcursor]

I have 2 pages using slick, one uses lazyLoad: "progressive", the other uses lazyLoad: "ondemand" which fails to work, it doesn't appear to load any images.

If I switch the 2nd page to lazyLoad: "progressive" it works as expected.

I wasn't able to reproduce with jsfiddle but I got it working on codepen: http://codepen.io/anon/pen/Nqwbjr

In the example it is set to ondemand and nothing happens. If you change it to progressive, the images will load.

[silicht]

I have the same problem with lazyLoad. Any fix for this problem?

thanks!

[ssnepenthe]

Came here looking for help with the same problem... I think I have figured it out.

It seems that slick + ondemand lazyload don't play nicely with img elements as immediate children of your carousel container. The fix is to wrap each img element in its own div.

[Mentioum]

I also have this issue.

[davehallowell]

Updated from 1.5.0 to 1.5.9 today to fix the issue where the slider doesn't start rotating after the mouse leaves. I have lazy-load: ondemand set and the first image wouldn't load. When the second image loads everything loads thereafter. I have each img element wrapped in it's own div.

lazy-load: ondemand seemed to work correctly in 1.5.0 but not 1.5.9. I ended up setting lazy-load: progressive and I see the first image just fine. This is better than not seeing the first image, but not ideal.

On a side note, thanks for giving us such an outstanding slider. It is the only one I need.

Thanks.

[mcclaskiem]

@davehallowell same issue here

[yanwsh]

it works when you wrap with a div.

[rafaelboschini]

I have the same problem here, onDemand not working. :( my options { lazyLoad: 'ondemand', slidesToShow: 1, slidesToScroll: 1, dots: true, infinite: true, variableWidth: true }

[MuriloEduardo]

Veio aqui à procura de ajuda com o mesmo problema ... Acho que descobri.

Parece que slick + ondemand lazyload não joga bem com elementos img como filhos imediatos do seu contêiner de carrossel. A correção é envolver cada elemento img em sua própria div.

Isso funcionou perfeitamente para mim!

[albirrkarim]

same bug

[AmeenJalali]

Same here

[Giovancruz]

Same here, in my case, the IMAGE is wrapped on a PICTURE tag with sources and the image won't load, stay with data-lazy attribute.

[webdev69420]

This still isn't fixed? 7 years later? I know you can wrap a div around each of your images and it works but that's just a hack/workaround...

[maieul]

Same problem...

[fsdevlalo]

Just figured it out. Couldn't make it to work until I replaced <img src="your.url"> with <img data-lazy="your.url">

Now it works like a charm!