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

聖光之護

发布时间：2026-01-16 23:59:02

|

175人浏览过

|

来源于php中文网

原创

// 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 (
    
      Loading…

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

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

     并在 CSS 中设置：

     

     AdMaker AI

     从0到爆款高转化AI广告生成器

     下载

     @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 状态更新（见下一步）
       });
     }, []);

3. 全局资源就绪状态管理（轻量方案）
   创建一个 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(
  
    
  
);

⚠️ 注意事项：

• 无法拦截 CSS 加载，务必通过构建工具（如 Vite 的 ?inline 导入或 CSS-in-JS 库）确保关键样式内联；
• 图片预加载应仅限首屏关键图，避免阻塞，非关键图保留 loading="lazy"；
• font-display: optional 是关键，它让浏览器在字体未加载完成时不渲染文本（空白），而非回退字体；
• 若使用服务端渲染（SSR），应配合 hydrateRoot 和 onRecoverableError 做更健壮的 hydration 控制。

综上， 是声明式加载协调的核心，但完整体验需结合预加载、字体策略与轻量状态管理——无需侵入每个组件，即可实现专业级首屏加载控制。