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

通过 react 的 `` 组件配合代码分割与资源预加载策略，可实现在所有关键资源（如字体、图片、css）就绪后才渲染主页面，避免闪退、字体闪烁或图片渐进加载问题。

在客户端渲染（CSR）的 React 应用中，浏览器默认会边解析 HTML/CSS/JS 边渲染，导致未加载完字体时回退到 Times New Roman、图片分块加载、样式未生效前布局错乱等问题。虽然本身原生仅支持异步组件（如 React.lazy）的加载状态兜底，但它可作为核心协调机制，结合其他技术实现“全资源就绪后首屏展示”的效果。

✅ 推荐分层解决方案（无需每个组件写 useEffect）：

顶层路由级 + React.lazy（基础骨架）
将主页面逻辑包裹在懒加载组件中，确保 JS 模块加载完成再挂载：

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

const HomePage = lazy(() => import('./pages/HomePage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));

function App() {
  return (
    
      
        
          } />
          
        
      
    
  );
}

export default App;

预加载关键静态资源（字体 & 图片）
不直接处理 CSS 或图片加载，需主动控制：

✅ 字体：使用 + font-display: optional 防止 FOIT/FOUT

并在 CSS 中设置：

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-display: optional; /* 等待加载完成再启用，否则跳过 */
}

✅ 关键图片：使用 loading="eager" + decode() 预解码（适用于 banner、logo 等首屏必现图）

// utils/preloadImage.ts
export const preloadImage = (src: string): Promise =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve();
    img.onerror = reject;
    img.src = src;
  });

// 在 App 或 Layout 中预加载
useEffect(() => {
  preloadImage('/images/hero-banner.jpg').then(() => {
    // 可触发全局 loaded 状态更新（见下一步）
  });
}, []);

全局资源就绪状态管理（轻量方案）
创建一个 ResourceLoader Context，聚合字体、图片、样式等加载信号，配合 Suspense 实现真正“全就绪”才显示：

// contexts/ResourceContext.tsx
import { createContext, useContext, useEffect, useState } from 'react';

interface ResourceState {
  fontsLoaded: boolean;
  imagesLoaded: boolean;
  stylesLoaded: boolean;
}

const ResourceContext = createContext<{
  isReady: boolean;
  markFontLoaded: () => void;
  markImageLoaded: () => void;
}>({
  isReady: false,
  markFontLoaded: () => {},
  markImageLoaded: () => {},
});

export function ResourceProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState({
    fontsLoaded: false,
    imagesLoaded: false,
    stylesLoaded: true, // CSS inlined via Vite/webpack usually ready
  });

  const isReady = state.fontsLoaded && state.imagesLoaded;

  useEffect(() => {
    // 监听字体加载（Web Font Loader 或 CSS Font Loading API）
    if ('fonts' in document) {
      (document as any).fonts.load('1em Inter').then(() => {
        setState(prev => ({ ...prev, fontsLoaded: true }));
      });
    }
  }, []);

  return (
     setState(prev => ({ ...prev, fontsLoaded: true })),
        markImageLoaded: () => setState(prev => ({ ...prev, imagesLoaded: true })),
      }}
    >
      {isReady ? children : Preparing experience…}
    
  );
}

然后在根组件中组合使用：

// main.tsx
import { ResourceProvider } from './contexts/ResourceContext';
import { App } from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  
    
  
);