如何提升以URL为源的图片加载速度？模态框图片加载优化

1. 提前预加载图片 #

在触发模态框打开的组件（比如电影列表项）中，提前加载目标图片，让浏览器在用户打开模态框前就把图片缓存好：

// 示例：在列表项组件中实现预加载
const MovieItem = ({ image, openModal }) => {
  useEffect(() => {
    const img = new Image();
    img.src = image;
    // 可选：添加加载错误处理
    img.onerror = () => console.error('图片预加载失败');
  }, [image]);

  return <div onClick={() => openModal(image)}>...</div>;
};

也可以在Modal组件内部做预加载，打开时触发：

const Modal = ({ image, ...props }) => {
  useEffect(() => {
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'image';
    link.href = image;
    document.head.appendChild(link);

    return () => document.head.removeChild(link);
  }, [image]);

  // 组件原有代码...
};

2. 使用低分辨率占位图（LQIP） #

生成一张原图的极小分辨率版本（比如10x10像素，转成base64嵌入），作为MovieCover的初始显示内容，监听原图加载完成后再替换：

const Modal = ({ image, ...props }) => {
  const [loadedSrc, setLoadedSrc] = useState(null);

  useEffect(() => {
    const img = new Image();
    img.src = image;
    img.onload = () => setLoadedSrc(image);
  }, [image]);

  // 替换为你的低分辨率占位图base64
  const placeholder = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...';

  return (
    <ModalOverlay data-testid="modal">
      <ModalContent>
        <MovieCover
          alt="movie-cover"
          src={loadedSrc || placeholder}
        />
        {/* 原有内容 */}
      </ModalContent>
    </ModalOverlay>
  );
};

这样打开模态框时会先显示模糊占位，不会出现黑屏，原图加载完成后自动切换为清晰版本。

3. 优化图片资源本身 #

• 转用WebP/AVIF格式：这类格式压缩率远高于JPG/PNG，相同画质下体积小一半以上；
• 匹配显示尺寸：根据模态框中图片的实际展示大小，提供对应分辨率的图片（比如模态框图片最大显示宽度800px，就不要加载2000px的原图）；
• 启用渐进式加载：将图片转为渐进式JPEG，加载时会逐步显示清晰内容，而非全图加载完成才显示。

4. 配置浏览器缓存 #

确保图片服务器设置正确的HTTP缓存头，比如Cache-Control: public, max-age=31536000，让浏览器长期缓存图片，用户再次打开模态框时直接从本地缓存读取。

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