diff --git a/src/components/ui/GalleryAnimation.svelte b/src/components/ui/GalleryAnimation.svelte index 2d86b75..08b5a39 100644 --- a/src/components/ui/GalleryAnimation.svelte +++ b/src/components/ui/GalleryAnimation.svelte @@ -7,8 +7,35 @@ * @prop {number} secondsPerImage — durée par image (défaut: 8s) * @prop {'vertical'|'horizontal'} mode — direction du défilement */ + import { onMount } from 'svelte' + let { images = [], secondsPerImage = 8, backgroundColor = null, backgroundImage = null, mode = 'vertical' } = $props() + let containerEl = $state(null) + let allLoaded = $state(false) + let needsFade = $state(false) + + // Wait for all unique source images to load before revealing + onMount(() => { + const uniqueSrcs = new Set(images.map(img => img.src).filter(Boolean)) + if (uniqueSrcs.size === 0) { allLoaded = true; return } + + let remaining = uniqueSrcs.size + const done = () => { if (--remaining <= 0) allLoaded = true } + + for (const src of uniqueSrcs) { + const img = new Image() + img.src = src + if (img.complete) { + done() + } else { + needsFade = true + img.onload = done + img.onerror = done + } + } + }) + const columns = $derived.by(() => { const count = images.length const duration = count * secondsPerImage @@ -40,6 +67,8 @@