PhotoSwipe icon indicating copy to clipboard operation
PhotoSwipe copied to clipboard

Flicker in lightbox when loading non-cached images

Open jasonwaltman opened this issue 4 years ago • 1 comments

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?

jasonwaltman avatar Apr 21 '20 04:04 jasonwaltman

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

abhinavkgrd avatar Feb 25 '21 13:02 abhinavkgrd