NextJS中如何在组件使用前预加载图片实现即时显示？

next/image的priority属性仅对组件首次挂载时就存在于DOM中的图片生效，对于条件渲染、路由跳转后才挂载的图片，该属性不会触发提前加载，这是你当前配置后加载速度仍不理想的核心原因。以下是针对两类图片场景的可落地方案，你可以根据需求选择是否保留next/image组件。

分场景预加载实现 #

30-50kb 短时操作确认提示插图 #

这类图片体积小、仅在用户触发特定操作后条件渲染、展示时间短，最稳妥的方式是在父页面/全局布局加载阶段就提前拉取资源，避免组件渲染时才发起请求导致展示期内图片未加载完成。

• 如果使用本地静态导入的图片资源，直接在父组件的next/head中插入预加载标签即可：

import Head from 'next/head'
// 提前导入提示组件使用的插图资源
import confirmTipIllu from '@/assets/confirm-tip.png'

export default function BusinessPage() {
  return (
    <>
      <Head>
        <link rel="preload" href={confirmTipIllu.src} as="image" />
      </Head>
      {/* 页面业务内容，包含后续条件渲染的提示组件 */}
    </>
  )
}

• 由于图片体积仅30-50kb，该预加载不会挤占首屏核心资源带宽，当用户操作触发提示组件渲染时，图片已经存入浏览器缓存，可直接秒显。如果追求极致体验，也可以直接将该小图转为base64格式内联在组件代码中，完全省去网络请求步骤。

500kb 大尺寸结果页插图 #

这类图片体积较大，不适合在首屏用最高优先级预加载（会挤占首屏JS、CSS、核心内容的加载带宽），推荐在浏览器空闲阶段、或者用户进入触发该插图展示的前置流程时提前拉取。
如果插图是用户操作后同页面条件渲染展示（比如提交表单后显示结果区块），可以在页面挂载后利用浏览器空闲时间预加载，参考代码如下：

import { useEffect, useState } from 'react'
import Image from 'next/image'
import resultIllu from '@/assets/result-illustration.png'

export default function FormPage() {
  const [showResult, setShowResult] = useState(false)

  useEffect(() => {
    // 浏览器空闲时预加载大插图，不阻塞首屏核心资源加载
    const preloadImg = () => {
      const img = new Image()
      img.src = resultIllu.src
    }
    if ('requestIdleCallback' in window) {
      requestIdleCallback(preloadImg)
    } else {
      // 兼容低版本浏览器
      setTimeout(preloadImg, 800)
    }
  }, [])

  return (
    <div>
      {/* 表单业务内容 */}
      {showResult && (
        <div className="result__illustration">
          <Image
            src={resultIllu}
            alt=""
            layout="responsive"
            objectFit="contain"
            priority
          />
        </div>
      )}
    </div>
  )
}

如果插图是在用户点击跳转的下级页面展示，直接在跳转前的页面挂载阶段用上述相同逻辑预加载即可，等用户完成操作跳转到结果页时，资源已经加载完成，不会出现1秒左右的等待空白。

改用原生img标签的实现逻辑 #

如果选择放弃next/image组件，直接使用原生<img>标签，预加载逻辑完全一致：只需要保证提前拉取的图片地址和实际渲染时img标签的src地址完全一致，资源存入浏览器缓存后，img渲染时会直接读取缓存实现秒显，不需要额外做特殊配置。

额外优化建议 #

• 你已经安装了sharp依赖，可以在next.config.js中配置开启avif/webp格式自动转换，通常能将500kb级别的jpg/png插图压缩至原体积的30%-50%，从根源降低加载耗时
• 预加载大体积图片时不要随意使用最高优先级的preload指令，避免影响核心业务资源加载，空闲时段预加载是体验最优的选择

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