Svelte/Sapper中实现特定图片懒加载的最佳方式技术咨询

嘿，这个需求在Sapper里其实挺常见的，结合它的页面生命周期特性和浏览器的图片加载机制，我们可以实现既流畅又符合要求的懒加载效果，我给你分享几个最佳实践方案：

1. 利用Sapper的preload生命周期+内存缓存（推荐） #

Sapper的preload函数会在页面渲染之前执行，刚好可以用来提前加载大图并缓存，这样用户第一次进入页面时，大图已经在加载队列里，返回页面时直接从内存缓存读取，完全不用重新请求。

实现步骤： #

• 首先在页面组件的模块级脚本里定义一个全局缓存对象，用来存储已加载的图片；
• 在preload中提前加载大图并存入缓存；
• 组件挂载后直接从缓存读取，替换小图。

示例代码：

<script context="module">
  // 全局内存缓存，跨页面共享已加载的大图
  const imageCache = {};

  export async function preload(page) {
    // 假设从路由参数获取大图地址，你可以根据实际场景调整
    const largeImageSrc = page.params.largeImg;
    if (!imageCache[largeImageSrc]) {
      // 用Promise包裹图片加载过程，确保preload完成前大图已开始加载
      await new Promise((resolve, reject) => {
        const img = new Image();
        img.src = largeImageSrc;
        img.onload = () => {
          imageCache[largeImageSrc] = img;
          resolve();
        };
        img.onerror = reject;
      });
    }
    // 将大图地址传递给组件
    return { largeImageSrc };
  }
</script>

<script>
  import { onMount } from 'svelte';
  export let largeImageSrc;
  // 初始显示小图/占位图
  let currentImageSrc = '/assets/small-placeholder.jpg';
  let isLoaded = false;

  onMount(() => {
    // 组件挂载时检查缓存，直接替换大图
    if (imageCache[largeImageSrc]) {
      currentImageSrc = largeImageSrc;
      isLoaded = true;
    } else {
      // 兜底：防止preload加载失败或网络过慢的情况
      const img = new Image();
      img.src = largeImageSrc;
      img.onload = () => {
        currentImageSrc = largeImageSrc;
        isLoaded = true;
        imageCache[largeImageSrc] = img;
      };
    }
  });
</script>

<!-- 给图片加过渡效果，提升用户体验 -->
<img 
  src={currentImageSrc}
  alt="图片描述"
  class={isLoaded ? 'image-loaded' : 'image-blur'}
/>

<style>
  .image-blur {
    filter: blur(8px);
    transition: filter 0.3s ease-in-out;
  }
  .image-loaded {
    filter: blur(0);
  }
</style>

2. 封装可复用的懒加载组件 #

如果项目里很多地方需要这种懒加载，把逻辑封装成Svelte组件会更高效，而且可以统一管理缓存。

组件代码（LazyImage.svelte）： #

<script>
  import { onMount } from 'svelte';
  // 组件参数：大图地址、小图占位、图片描述
  export let src;
  export let placeholder;
  export let alt = '';

  let currentSrc = placeholder;
  let isLoaded = false;
  // 全局缓存对象，挂载到window上跨组件共享
  const imageCache = window.lazyImageCache || (window.lazyImageCache = {});

  onMount(() => {
    // 优先从缓存读取
    if (imageCache[src]) {
      currentSrc = src;
      isLoaded = true;
      return;
    }
    // 缓存不存在则加载大图
    const img = new Image();
    img.src = src;
    img.onload = () => {
      currentSrc = src;
      isLoaded = true;
      imageCache[src] = img;
    };
  });
</script>

<img 
  src={currentSrc}
  alt={alt}
  class={`lazy-img ${isLoaded ? 'loaded' : ''}`}
/>

<style>
  .lazy-img {
    width: 100%;
    height: auto;
    filter: blur(4px);
    transition: all 0.4s ease;
  }
  .loaded {
    filter: blur(0);
    opacity: 1;
  }
</style>

在页面中使用： #

<script>
  import LazyImage from '$components/LazyImage.svelte';
</script>

<LazyImage 
  src="/assets/large-mountain.jpg"
  placeholder="/assets/small-mountain-placeholder.jpg"
  alt="高山风景"
/>

3. 结合浏览器HTTP缓存的简化方案 #

如果不想手动管理内存缓存，可以依赖浏览器的HTTP缓存特性，配合Sapper的页面缓存（默认开启）来实现：

• 小图作为初始src，大图存在data-src；
• 组件挂载后手动触发大图加载，加载完成后替换src；
• 返回页面时，浏览器会从HTTP缓存中读取大图，无需重新请求。

示例代码：

<script>
  import { onMount } from 'svelte';
  export let largeSrc;
  let imgElement;
  const placeholderSrc = '/assets/small-placeholder.jpg';

  onMount(() => {
    const img = new Image();
    img.src = largeSrc;
    img.onload = () => {
      imgElement.src = largeSrc;
    };
  });
</script>

<img 
  bind:this={imgElement}
  src={placeholderSrc}
  alt="图片描述"
  class="lazy-img"
/>

<style>
  .lazy-img {
    transition: opacity 0.3s ease;
  }
</style>

注意事项： #

• 小图建议使用**低质量占位图（LQIP）**或者大图的缩略版，体积越小越好，确保快速加载；
• 内存缓存如果积累太多图片，可能会占用较多内存，你可以在页面卸载时清理不常用的缓存项，比如监听beforeunload事件；
• 如果大图地址是动态生成的，确保缓存的key唯一，避免不同图片被错误覆盖。

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