search

aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.54k stars 1.73k forks source link

LazySizes blur filter comes back after slider ends #655

Open hamilton-seguin opened 5 years ago

hamilton-seguin commented 5 years ago

Hi and thank you for LazySizes awesome features.

I have a problem with my slider/carousel. Images are uploaded via cloudimage for sizing and compressing.

There are 4 images in my slider, 1 visible at a time with some edging on the both sides to see the previous and next image.

The first image loads (and the blur is removed). The second image loads at the same time (and the blur is removed), i can see this second image from the edging on the right. The 4th picture however (left edging) doesn't load until its reached by the slider (or manually selected via nav) It switches to the the 2nd image, 3rd is already loaded (visible from the right edging). ... Then it arrives on the 4th picture and this is when the 1st picture appears blurred again (from the right edging). When the slider restarts and continues to slide from 4th to 1st picture the 1st picture appears totally blurred and stays blurred. The 2nd picture appears also blurred from the edging. But when the slider reaches the 2nd picture again, then the 2nd picture loads AND the 1st picture from the left edging finally loads... (If you manually drag from 2nd to 1st the 1st pictures loads) This pattern repeats itself over and over.

I'm not really sure what kind of HTML or JS i need to link you but any answer would appreciated ! Thank you

aFarkas commented 5 years ago

I would need to see an example of this. But I assume that the slider does clone elements and basically restarts the lazyload process the hole time.

In that case it is hard to fix. Similar things would happen if you would use video or iframe elements inside.

hamilton-seguin commented 5 years ago

thank you for your answer ! I use tiny-slider and yes it does clone elements (99% sure). https://github.com/ganlanyuan/tiny-slider How could i show you my slider?

couldn't I add a script to check if images were loaded and not to reload once done?

thank you