Fix slideshow mid-transition flash — delay src change until fade-out completes
Changing current.src immediately triggered the new image to render while the element was still mid-opacity-transition (partially visible), causing the next queued photo to briefly flash through the crossfade. Now we wait for the transitionend event before setting the new preload src. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -326,9 +326,11 @@ function advanceSlide() {
|
||||
next.classList.add('active');
|
||||
current.classList.remove('active');
|
||||
activeSlot = nextSlot;
|
||||
// Preload the upcoming photo into the now-hidden slot
|
||||
slideIndex = (slideIndex + 1) % photos.length;
|
||||
current.src = photos[(slideIndex + 1) % photos.length];
|
||||
const preloadSrc = photos[(slideIndex + 1) % photos.length];
|
||||
// Only change src after the fade-out completes — changing it mid-transition
|
||||
// causes the new image to appear at partial opacity (the flash the user sees)
|
||||
current.addEventListener('transitionend', () => { current.src = preloadSrc; }, { once: true });
|
||||
};
|
||||
|
||||
// If the preloaded image is ready, swap immediately; otherwise wait for it
|
||||
|
||||
Reference in New Issue
Block a user