Next.js中首屏下方点击触发的图片应如何正确实现预加载？

注意：以下方案均符合Next.js官方性能规范，不会影响首屏加载速度

• 方案1：浏览器空闲期手动预加载（最推荐） #

  该方案完全避免占用首屏加载资源，精准控制预加载时机，适合绝大多数场景。
  实现逻辑：监听页面load事件（首屏所有资源加载完成后触发），通过requestIdleCallback利用浏览器空闲时间，用原生Image对象预加载目标图片，图片会被缓存到浏览器中，用户点击按钮展示时直接读取缓存无需重新请求。
  代码示例：

  import { useState, useEffect } from 'react'
  import Image from 'next/image'
  
  // 替换为你的实际图片地址
  const PRELOAD_IMG_SRC = '/your-target-image.png'
  
  export default function OffscreenImageModule() {
    const [isImageVisible, setIsImageVisible] = useState(false)
  
    useEffect(() => {
      const preloadHandler = () => {
        const preloadImg = new Image()
        preloadImg.src = PRELOAD_IMG_SRC
      }
  
      // 首屏已加载完成则直接在空闲期预加载
      if (document.readyState === 'complete') {
        requestIdleCallback(preloadHandler)
      } else {
        // 等待首屏加载完成后再触发预加载
        const onWindowLoad = () => requestIdleCallback(preloadHandler)
        window.addEventListener('load', onWindowLoad)
        return () => window.removeEventListener('load', onWindowLoad)
      }
    }, [])
  
    return (
      <div>
        <button onClick={() => setIsImageVisible(true)}>查看图片</button>
        {isImageVisible && (
          <Image
            src={PRELOAD_IMG_SRC}
            alt="图片描述"
            width={800}
            height={500}
            // 无需额外添加priority或loading属性
          />
        )}
      </div>
    )
  }
  

• 方案2：延迟渲染+eager加载 #

  如果你不想写原生预加载逻辑，可以在首屏加载完成后，先将Image组件隐藏渲染（不展示在视口内），配合loading="eager"完成预加载，用户点击时直接显示即可。该方案要注意不能在首屏渲染阶段就加载该Image组件，避免抢占首屏资源。

• 不推荐的操作说明 #

  • 不要给该图片添加priority属性：该属性会将图片资源优先级提升到最高，和首屏关键资源（JS、CSS、首屏可见图片）抢占网络与渲染资源，拖慢首屏加载速度，不符合官方使用规范。
  • 不要在首屏渲染时直接给图片加loading="eager"：会提前触发非关键资源加载，损害首屏性能。

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