dimsemenov / PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent
http://photoswipe.com
MIT License
24.25k stars 3.31k forks source link

Flicker in lightbox when loading non-cached images #1691

Open jasonwaltman opened 4 years ago

jasonwaltman commented 4 years ago

I'm previewing PhotoSwipe for a new website. I have the zoom in and out animation working like on the PhotoSwipe home page and I've populated msrc with the thumbnail image so the thumbnail is zoomed while the larger image is loaded. The animation in and out of the lightbox is smooth and works great!

When I'm in the lightbox on desktop browsers and use the UI arrows or keyboard arrows to move to the next image I notice a very slight flicker when a new image is loaded for the first time. It's like the lightbox goes black for a split second before the next image is displayed. If I go back to a previous image, or loop all the way around, this split second of blackness isn't visible--the new image just immediately pops in (I'm guessing the browser has the image cached the second time around?). Preloading doesn't seem to matter as even if I wait a decent amount of time before moving to the next image the flicker is still noticeable. I think I see this on mobile too but the slide transition sorta masks the effect (second time around though sliding appears smoother).

This is reproducible on the PhotoSwipe home page. After loading the first image then clicking right there's a slight flicker on all images until coming back around to the first again. Once all images have been cached, there's no longer a perceptible flicker.

Is this expected? Is there a workaround? I know many have requested slide or fade transitions for desktop browsers which might hide this as it (sorta) does on mobile. (I'd vote for a fade but don't mind the current implementation minus the flicker.) Would displaying a scaled version of the msrc thumbnail and replacing it with the full image once loaded help? The home page states: "Images display progressively as data arrives" so I didn't expect any flickering, but maybe the progressive loading is only noticeable on super-large images or slower connections?

abhinavkgrd commented 3 years ago

Where you able to find a fix for it @jasonwaltman . I seem to face the same issue