SvelteKit中如何解决图片切换时的闪烁问题

首次加载时轮播图切换出现闪烁，本质是非当前显示的图片未被预加载——因为你用了display: none隐藏非当前项，浏览器会延迟加载这些图片，切换时才开始请求资源，导致短暂空白或闪烁；缓存后图片已存在本地，所以切换正常。

下面是修改后的代码，通过预加载图片+优化布局逻辑解决问题：

<script lang="ts">
    import { onMount } from "svelte";
    import { writable } from "svelte/store";

    // 图片列表
    const images = [
        {
            path: "https://static.bunnycdn.ru/i/cache/images/5/58/5806a16f2892768b4930c39ebf6ce756.jpg",
            id: "Image 1",
        },
        {
            path: "https://static.bunnycdn.ru/i/cache/images/0/03/0307ce050517b8fde68134b23fa9b1d1.jpg",
            id: "Image 2",
        },
    ];

    let currentIndex = writable(0);
    let interval: ReturnType<typeof setInterval>;
    let imagesLoaded = false; // 标记所有图片是否加载完成

    // 预加载所有图片
    const preloadImages = async () => {
        const loadPromises = images.map(img => {
            return new Promise((resolve) => {
                const image = new Image();
                image.src = img.path;
                image.onload = resolve;
                image.onerror = resolve; // 加载失败也继续，避免阻塞轮播
            });
        });
        await Promise.all(loadPromises);
        imagesLoaded = true;
    };

    onMount(async () => {
        // 先预加载所有图片
        await preloadImages();
        
        // 启动轮播定时器
        interval = setInterval(() => {
            currentIndex.update((value) => (value + 1) % images.length);
        }, 3000);

        return () => {
            clearInterval(interval);
        };
    });
</script>

<style>
    .slideshow {
        position: relative;
        width: 100%;
        height: 400px; /* 根据需求设置高度 */
        overflow: hidden;
    }

    .item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.3s ease; /* 添加平滑过渡，避免生硬切换 */
        pointer-events: none; /* 隐藏的图片不响应点击 */
    }

    .item.active {
        opacity: 1;
        pointer-events: auto;
    }

    .slide {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 保持图片比例，填充容器 */
    }
</style>

<div class="slideshow">
    {#each images as image, i (image.id)}
        <div class="item {i === $currentIndex && imagesLoaded ? 'active' : ''}">
            <img
                class="slide"
                src={image.path}
                alt={`Slide ${i + 1}`}
            />
        </div>
    {/each}
</div>

关键改动说明： #

1. 预加载图片：通过preloadImages函数提前加载所有图片资源，确保切换时图片已经存在于浏览器缓存中。
2. 布局优化：用绝对定位替代display: none，让所有图片始终存在于DOM结构中，仅通过opacity控制显示/隐藏，配合过渡动画让切换更平滑。
3. 加载状态控制：添加imagesLoaded标记，确保所有图片加载完成后才开始轮播切换，避免首次切换时图片未加载完成的问题。

内容的提问来源于stack exchange，提问作者Myriad-Sun