luddie/Calender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix slideshow mid-transition flash — delay src change until fade-out completes

Browse Source 
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:
Luwig Mey
2026-07-28 21:49:54 +12:00
parent 1e97e7c805
commit 05d6fd93b5
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/js/app.js
View File

@@ -326,9 +326,11 @@ function advanceSlide() {
next.classList.add('active'); next.classList.add('active');
current.classList.remove('active'); current.classList.remove('active');
activeSlot = nextSlot; activeSlot = nextSlot;
// Preload the upcoming photo into the now-hidden slot
slideIndex = (slideIndex + 1) % photos.length; 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 // If the preloaded image is ready, swap immediately; otherwise wait for it