如何在 React 中实现页面完全加载（含字体、图片等资源）后再显示

本文介绍如何利用 react 的 `` 组件配合代码分割与资源预加载机制，在客户端渲染应用中实现“所有静态资源（如字体、图片、样式）就绪后才展示完整页面”，避免字体闪烁、图片渐进加载等体验问题。

在 React 客户端渲染（CSR）应用中，浏览器默认会逐步解析 HTML、加载 CSS/JS、异步请求图片和字体——这导致用户可能先看到未样式化的文字（如 Times New Roman）、占位空白或模糊缩略图，再逐步“闪现”为最终效果。这种 FOIT（Flash of Invisible Text）或 FOUT（Flash of Unstyled Text）严重影响专业性与用户体验。

但需明确一点： 本身并不直接等待图片或字体加载完成——它原生仅支持对 React.lazy() 动态导入的组件 进行挂起（suspension）。因此，要实现“全资源就绪后才显示页面”，需结合以下策略：

✅ 推荐方案：资源加载状态集中管控（轻量、无需每个组件 useEffect）

1. 使用 React.lazy + Suspense 包裹路由级入口组件（确保 JS 代码块加载完成）
2. 将关键字体、CSS 通过 提前声明（由浏览器主动高优加载）
3. 图片采用 loading="eager" + 占位 SVG/骨架屏 + 可选 onLoad 回调聚合校验（非强制，但可增强控制力）
4. 自定义顶层加载守卫（推荐）：用 useState + useEffect 在 App 或 RouterProvider 外层统一监听关键资源状态

以下是简洁可靠的实现示例：

站酷梦笔

国内知名设计社区站酷推出的AI插画生成工具

下载

// App.tsx
import { useState, useEffect, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// 预加载关键资源（建议在 public/index.html 中添加）：
// 
// 

function App() {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    // 模拟关键资源加载检查（实际项目中可扩展）
    const resources = [
      // 字体加载检测（需配合 @font-face 和 document.fonts.load）
      document.fonts.load('16px "Inter Variable"').then(() => true),
      // 关键图片加载（可选）
      new Promise((resolve) => {
        const img = new Image();
        img.onload = () => resolve();
        img.onerror = () => resolve(); // 失败也继续，避免阻塞
        img.src = '/logo.png';
      }),
      // 等待 DOM 就绪 & 样式表加载（通常已满足）
      Promise.resolve(),
    ];

    Promise.all(resources).then(() => setIsReady(true));
  }, []);

  if (!isReady) {
    return (
      

        
Loading…
      
    );
  }

  return (
    
      Loading page…