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

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

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

但需明确一点： 本身并不直接等待图片或字体

加载完成——它原生仅支持对 React.lazy() 动态导入的组件 进行挂起（suspension）。因此，要实现“全资源就绪后才显示页面”，需结合以下策略：

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

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

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

// 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 (
    
      
        
          } />
          
        
      
    
  );
}

export default App;

⚠️ 注意事项： document.fonts.load() 是现代浏览器标准 API，兼容性良好（Chrome 35+, Firefox 41+, Safari 10.1+），IE 不支持；若需兼容旧版，可降级为 setTimeout 延迟渲染或使用第三方库（如 webfontloader）。图片预加载不依赖，而是通过 new Image().src 触发浏览器缓存；真实项目中建议结合 IntersectionObserver 懒加载非首屏图片，仅对首屏关键图做 eager 预载。切勿在每个组件内重复写 useEffect 检查资源——这违背了“集中管控”原则，增加维护成本与性能开销。