摄影作品集网站图片加载优化求助：滚动时图片弹出问题

问题描述 #

我正在制作一个摄影作品集网站，期望图片加载迅速且滚动浏览流畅，但滚动页面时图片总是弹出式加载，而非提前加载完成。尝试多种解决策略均未奏效，当前通过JavaScript创建图片元素，在其onload事件触发时添加至HTML的div容器中，问题仍存在。

相关代码 #

<script>
    let imageContainer: HTMLDivElement;
    onMount(async () => {
        // FetchEntries 返回包含图片url(.imagePath)的对象数组
        data = await FetchEntries();
        data.forEach((entry) => {
            let url = CDN_LOCATION + "/" + entry.imagePath;
            let newImage = new Image(500, 500);
            newImage.src = url;
            newImage.onload = () => imageContainer.append(newImage);
        });

        loaded = true;
    });
</script>

<div bind:this={imageContainer}/>

问题表现 #

解决办法 #

核心问题是等待图片加载完成后才插入DOM，导致滚动到对应位置时图片未就绪，只能弹出显示。要实现提前加载，需调整加载与DOM插入时机，结合以下优化方案：

1. 先插入DOM再加载图片 #

不要等onload事件触发才添加图片到容器，而是先将图片元素插入DOM，预留好布局空间后再启动加载，避免布局跳动：

<script>
    let imageContainer: HTMLDivElement;
    onMount(async () => {
        data = await FetchEntries();
        data.forEach((entry) => {
            let url = CDN_LOCATION + "/" + entry.imagePath;
            let newImage = new Image(500, 500);
            // 设置占位样式，固定尺寸防止布局重排
            newImage.style.minHeight = "500px";
            newImage.style.objectFit = "cover";
            // 先插入DOM
            imageContainer.append(newImage);
            // 最后设置src开始加载图片
            newImage.src = url;
        });

        loaded = true;
    });
</script>

<div bind:this={imageContainer} style="display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 1rem;"/>

2. 用Intersection Observer实现提前懒加载 #

如果图片数量较多，一次性加载所有会拖慢首屏性能。使用Intersection Observer可以让图片在进入视口前500px就开始加载，兼顾流畅性与带宽效率：

<script>
    let imageContainer: HTMLDivElement;
    onMount(async () => {
        data = await FetchEntries();
        // 创建观察者，提前500px触发加载
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target as HTMLImageElement;
                    img.src = img.dataset.src!;
                    observer.unobserve(img);
                }
            });
        }, { rootMargin: "500px 0px" });

        data.forEach((entry) => {
            let url = CDN_LOCATION + "/" + entry.imagePath;
            let newImage = new Image(500, 500);
            // 先把图片地址存在data属性中
            newImage.dataset.src = url;
            newImage.style.minHeight = "500px";
            newImage.style.objectFit = "cover";
            imageContainer.append(newImage);
            // 监听图片元素
            observer.observe(newImage);
        });

        loaded = true;
    });
</script>

3. 额外优化建议 #

• 使用WebP/AVIF格式图片：相比JPG/PNG体积更小，加载速度更快，多数CDN支持自动转换格式
• 添加低分辨率占位图：用模糊的缩略图作为临时占位，加载完成后替换，提升视觉过渡体验
• 固定布局尺寸：通过Grid/Flex布局固定容器列宽与图片高度，避免图片加载时的布局偏移（CLS）
• 开启CDN优化：确保CDN开启图片压缩、缓存功能，让图片从离用户最近的节点加载

内容的提问来源于stack exchange，提问作者szammyboi