search

xiphux / svimg

Svelte image component with image preprocessing and lazy loading
ISC License
244 stars 15 forks source link

Some images become blurred when used within carousel #17

Open mcmxcdev opened 2 years ago

mcmxcdev commented 2 years ago

First of all, thank you for creating this amazing library! It is a perfect replacement for svelte-image which is unmaintained for a while now unfortunately.

Regarding the issue:

It's probably best if you check out https://master--zingy-entremet-a41524.netlify.app/ and go to the bottom of the page to the food image slider, where svimg is used in conjunction with svelte-splide. Swipe quickly left and right on the carousel, and you will see that some images are loaded while others stay blurred. After more swiping, some images are loaded correctly then but others get blurred again.

I couldn't detect any consistency, but noticed that the images that stay blurred seem to have height="NaN" on them.

xiphux commented 2 years ago

I'll take a look. I didn't originally design around carousels like this, so I'm guessing some part of the lazy loading / ResizeObserver has some sort of confusion or race condition with how svelte-splide brings images in from offscreen.

As a workaround, you could maybe try setting the immediate prop to disable svimg's lazy loading - you'd still get the image preprocessing benefit, although obviously not the lazy loading benefit. It looks like svelte-splide has its own lazy load option, though, which might be worth trying instead. (Might even work better, since I would imagine svelte-splide has a better understanding of the full set of the pictures in the carousel and which ones are about to come into view)

mcmxcdev commented 2 years ago

That's some helpful advice I didn't even think of! I will see what workaround will provide the best result.