如何在Next.js中预加载尚未渲染的图片？

嘿，这个问题我之前做项目的时候也遇到过——动态挂载的弹窗里用Next.js Image组件，第一次打开总会有个短暂的空白，体验确实不太好。好在Next.js有不少专属方案能解决这个预加载的问题，完全不用退回到jQuery时代那种display:none的老办法，下面给你整理几个实用的思路：

这个方法的核心是在页面初始化的时候，就让浏览器把弹窗里的图片缓存下来，等弹窗挂载的时候，图片已经在本地了，自然就不会有加载延迟。

你可以在弹窗的父组件或者页面根组件里，用useEffect创建一个Image实例，设置它的src为弹窗图片的地址：

import { useEffect } from 'react';

function HomePage() {
  useEffect(() => {
    // 预加载弹窗里的目标图片
    const popupImage = new Image();
    // 如果是本地图片，直接写相对路径；远程图片要确保在next.config.js里配置了domains
    popupImage.src = '/images/popup-banner.jpg';
    
    // 可选：监听加载完成事件，做一些额外处理
    popupImage.onload = () => {
      console.log('弹窗图片预加载完成');
    };
  }, []); // 空依赖数组确保只在页面首次加载时执行一次

  return (
    <div>
      {/* 页面其他内容 */}
      <PopupModal />
    </div>
  );
}

export default HomePage;

这个方案的好处是简单可控，不会额外增加DOM节点，完全符合React组件动态挂载的逻辑。

你可以在页面的<Head>组件里添加rel="preload"的链接，告诉浏览器提前加载指定的图片资源。这种方式更贴近浏览器原生的预加载机制，适合需要预加载多张图片的场景。

import Head from 'next/head';

function HomePage() {
  return (
    <>
      <Head>
        {/* 预加载单张图片 */}
        <link 
          rel="preload" 
          as="image" 
          href="/images/popup-banner.jpg"
          // 如果需要支持响应式图片，可以加上imagesrcset和imagesizes
          imagesrcset="/images/popup-banner.jpg 1x, /images/popup-banner-2x.jpg 2x"
          imagesizes="(max-width: 768px) 100vw, 50vw"
        />
      </Head>
      {/* 页面内容 */}
      <PopupModal />
    </>
  );
}

注意：如果是远程图片，同样需要在next.config.js的images.domains里配置对应的域名，不然Next.js会拦截预加载请求。

如果预加载的时机不好把握，或者担心预加载影响首屏性能，你可以给Next.js的<Image>组件加上placeholder="blur"属性，配合模糊占位图，让用户在图片加载完成前看到一个低分辨率的模糊版本，减少空白带来的突兀感。

你可以让Next.js自动生成模糊占位图，也可以自己用工具生成base64字符串：

import Image from 'next/image';

function PopupModal() {
  // 假设这是弹窗里的图片
  return (
    <div className="popup">
      <Image
        src="/images/popup-banner.jpg"
        alt="订阅提示"
        width={600}
        height={400}
        placeholder="blur"
        blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
      />
      {/* 弹窗其他内容 */}
    </div>
  );
}

这个方案虽然不能提前加载原图，但能极大缓解用户的等待焦虑，和前面的预加载方案配合使用效果更好。

其实Next.js的<Image>组件本身是带有懒加载逻辑的，即使你把弹窗组件一直挂载在DOM里用display:none隐藏，它也可能不会提前加载图片（因为组件不可见，懒加载机制会触发），反而会额外占用DOM资源，违背React组件按需挂载的设计思想。所以完全没必要走回头路，用上面的预加载方案就足够解决问题了。

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