portfolio : remove preloadAll, use {#key} for clean project transitions. related to #55
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
preloadAll caused slow loading by fetching all projects' images at once
(and 404s from srcset strings used as img src). {#key currentIndex}
destroys/recreates DOM on project switch, eliminating stale images.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
947275544d
commit
3c92903518
1 changed files with 36 additions and 48 deletions
|
|
@ -128,28 +128,12 @@
|
|||
}
|
||||
})
|
||||
|
||||
// --- Préchargement de tous les médias au premier passage ---
|
||||
let preloaded = false
|
||||
|
||||
function preloadAll() {
|
||||
for (const project of projects) {
|
||||
if (project.mockup) new Image().src = project.mockup
|
||||
if (project.mockupWebp) new Image().src = project.mockupWebp
|
||||
if (project.galleryBackgroundImage) new Image().src = project.galleryBackgroundImage
|
||||
for (const img of (project.imagesGallery ?? [])) {
|
||||
if (img.src) new Image().src = img.src
|
||||
if (img.webp) new Image().src = img.webp
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Effect: reset when slide deactivated ---
|
||||
// wasActive évite que clearAnchor() s'exécute au montage initial
|
||||
// (isActive est false avant l'initialisation des slides)
|
||||
let wasActive = false
|
||||
$effect(() => {
|
||||
if (isActive) {
|
||||
if (!preloaded) { preloaded = true; preloadAll() }
|
||||
wasActive = true
|
||||
} else if (wasActive) {
|
||||
nav.reset()
|
||||
|
|
@ -162,9 +146,11 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
{#key currentIndex}
|
||||
<div class="portfolio-gallery mobile-only" aria-hidden="true">
|
||||
<GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} secondsPerImage={currentProject.secondsPerImage} />
|
||||
</div>
|
||||
{/key}
|
||||
|
||||
<section
|
||||
class="portfolio golden-grid"
|
||||
|
|
@ -173,6 +159,7 @@
|
|||
aria-label="Portfolio"
|
||||
>
|
||||
{#if currentProject}
|
||||
{#key currentIndex}
|
||||
<!-- Galerie animation (gauche desktop / plein écran mobile) -->
|
||||
<div class="portfolio-gallery desktop-only" aria-hidden="true">
|
||||
<GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} mode={currentProject.galleryAnimationMode} secondsPerImage={currentProject.secondsPerImage} />
|
||||
|
|
@ -207,6 +194,7 @@
|
|||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/key}
|
||||
{/if}
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue