kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.53k stars 5.89k forks source link

Lazy-load images not replaced on cloned slicks-slide #3154

Open apomili opened 7 years ago

apomili commented 7 years ago

When you set infinite carousel and you have lazyloaded images, the src attribute of cloned elements aren't replace with the image at load.

DEMO

http://jsfiddle.net/w6z6c53y/

====================================================================

Steps to reproduce the problem

Set data-lazy intead of src in the image inside the slide, set infinite carousel, scroll on the next slides.

====================================================================

What is the expected behaviour?

No image swap

====================================================================

What is observed behaviour?

When the cloned slide enter from the right side, the images are not showed. The images return visible when the slide swaps on the real one.

====================================================================

FIX:

            imageToLoad.onload = function() { 
                 [...]rest of the function

                //REPLACE LAZYLOAD ON CLONED SLICK
                $(".slick-cloned [data-lazy='" + imageSource  + "']").attr("src", imageSource).removeAttr('data-lazy data-srcset data-sizes');                    
            };
ram-mar commented 7 years ago

First of all thanks a lot for this awesome slider, I really appreciate it.

I am experiencing this issue as well, it would be great if you guys could fix this.