Next.js 13如何预加载头部图片？解决加载留白问题

首先得明确：priority 属性的作用是把图片标记为LCP（ Largest Contentful Paint）元素，让浏览器优先加载它，但它不会阻止页面渲染——这就是为什么你还是会看到空白，页面不会等图片加载完再显示。

要实现“等头部图片加载完成后再渲染页面/头部区域”，可以试试下面几个方案：

1. 用Suspense配合Image（Next.js 13+ App Router） #

如果用的是App Router，可以把Image组件包裹在Suspense里，设置一个和图片尺寸一致的占位骨架（或者加载动画），这样页面会等图片加载完成后再替换占位内容，不会出现空白：

import { Suspense } from 'react';
import Image from 'next/image';

// 占位组件，尺寸和图片一致
const ImagePlaceholder = () => (
  <div className="w-[800px] h-[400px] bg-gray-100 animate-pulse"></div>
);

export default function Header() {
  return (
    <Suspense fallback={<ImagePlaceholder />}>
      <Image
        src="/header-image.jpg"
        alt="Header"
        width={800}
        height={400}
        priority={true}
      />
    </Suspense>
  );
}

2. 预加载图片资源 #

在页面的head里添加预加载指令，强制浏览器提前加载头部图片，配合priority属性能大幅缩短图片加载时间，减少空白出现的概率：

// 在layout.tsx或者page.tsx的head中添加
import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <link
          rel="preload"
          as="image"
          href="/header-image.jpg"
          imagesrcset="/header-image.jpg?w=800 800w, /header-image.jpg?w=1600 1600w"
          imagesizes="100vw"
        />
      </Head>
      <Image
        src="/header-image.jpg"
        alt="Header"
        width={800}
        height={400}
        priority={true}
      />
      {/* 其他页面内容 */}
    </>
  );
}

3. 用模糊占位替代空白 #

如果不想完全阻止页面渲染，只是不想看到空白，可以给Image组件设置placeholder="blur"和blurDataURL，加载时显示一张低分辨率的模糊占位图，既保留动画效果，又不会有空白：

import Image from 'next/image';

// 生成图片的base64模糊占位，可以用在线工具生成，比如blurha.sh
const blurData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';

export default function Header() {
  return (
    <Image
      src="/header-image.jpg"
      alt="Header"
      width={800}
      height={400}
      priority={true}
      placeholder="blur"
      blurDataURL={blurData}
    />
  );
}

4. 手动监听加载状态，控制页面渲染 #

如果必须等图片加载完才渲染整个页面，可以用useState和onLoad事件手动控制渲染时机：

import { useState } from 'react';
import Image from 'next/image';

export default function Page() {
  const [isImageLoaded, setIsImageLoaded] = useState(false);

  return (
    <>
      {/* 先加载隐藏的图片，监听加载完成 */}
      <Image
        src="/header-image.jpg"
        alt="Header"
        width={800}
        height={400}
        priority={true}
        style={{ display: 'none' }}
        onLoad={() => setIsImageLoaded(true)}
      />
      {/* 图片加载完成后再渲染页面内容 */}
      {isImageLoaded && (
        <div className="page-content">
          <Image
            src="/header-image.jpg"
            alt="Header"
            width={800}
            height={400}
            priority={true}
          />
          {/* 其他页面内容和动画 */}
        </div>
      )}
    </>
  );
}

注意：方案4会让页面初始完全空白，直到图片加载完成，可能影响LCP得分，除非你的动画必须依赖图片加载完成，否则更推荐前三个方案。

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