实现 React 应用中字体与图片完全预加载后再展示页面的完整方案

碧海醫心

发布时间：2026-01-16 23:42:09

782人浏览过

来源于php中文网

原创

实现 React 应用中字体与图片完全预加载后再展示页面的完整方案

通过 react 的 `` 结合资源预加载策略（如 `preload`、`font-face` 控制、图片懒加载拦截），可在首屏渲染前确保字体、关键图片等资源就绪，避免 fout/foit 和破碎图像问题。

在客户端渲染（CSR）的 React 应用中，浏览器默认按 HTML 解析顺序逐步加载 CSS、字体和图片，导致未样式化文本（FOUT）、不可见文本（FOIT）或占位图闪烁等问题。单纯依赖并不能自动预加载字体或图片——它仅对 React.lazy() 动态导入的组件 或 支持 Suspense 的异步数据源（如 Relay、React Query v5+） 生效。因此，需组合以下三层策略实现真正“全资源就绪后才显示页面”：

✅ 1. 关键字体：使用 + font-display: optional

在 public/index.html 的

中预加载核心字体，并禁用不可见文本回退：

⚠️ 注意：font-display: optional 要求浏览器在 100ms 内完成加载，否则跳过渲染字体——这正符合“全就绪再显示”的前提。

✅ 2. 关键图片：用 loading="eager" + 自定义 ImageLoader 拦截

避免实现 React 应用中字体与图片完全预加载后再展示页面的完整方案的默认行为。创建一个可 Suspense 的

 组件：
// components/PreloadedImage.tsx
import { useState, useEffect, Suspense } from 'react';

interface PreloadedImageProps extends Omit, 'src'> {
  src: string;
}

export function PreloadedImage({ src, ...props }: PreloadedImageProps) {
  const [isLoaded, setIsLoaded] = useState(false);
  const [error, setError] = useState(false);

  useEffect(() => {
    const img = new Image();
    img.src = src;
    img.onload = () => setIsLoaded(true);
    img.onerror = () => setError(true);
  }, [src]);

  if (!isLoaded && !error) {
    throw Promise.resolve(); // 触发 Suspense fallback
  }

  return @@##@@;
}

在路由入口处包裹 ：

							
								
								
									无阶未来模型擂台/AI 应用平台
									无阶未来模型擂台/AI 应用平台，一站式模型+应用平台
								
								下载 
							
						
// App.tsx
import { Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    
      Loading assets...

}> } /> } /> ); } // 在 HomePage 中使用预加载图片 function HomePage() { return (

Welcome

       {/* 同理可封装 SVG/图标组件 */}

); }

✅ 3. 全局资源检查（进阶）：用 document.fonts.load() + Promise.all

若需更精确控制（例如等待多个字体族），可在 index.tsx 初始化时校验：

// index.tsx
async function waitForCriticalAssets() {
  const fontPromises = [
    document.fonts.load('16px Inter'),
    document.fonts.load('bold 16px Inter'),
  ];

  const imagePromises = Array.from(
    document.querySelectorAll('img[data-preload]')
  ).map((img) => {
    return new Promise((resolve) => {
      if ((img as HTMLImageElement).complete) resolve();
      else img.addEventListener('load', () => resolve(), { once: true });
    });
  });

  await Promise.all([...fontPromises, ...imagePromises]);
}

// 渲染前等待
waitForCriticalAssets().then(() => {
  const root = ReactDOM.createRoot(document.getElementById('root')!);
  root.render();
});

? 总结与最佳实践

本身不加载资源，而是协调已触发的异步操作；必须配合手动资源加载逻辑（如 new Image()、document.fonts.load()）才能生效；
不要为每个组件加 useEffect 监听加载——统一在根组件或自定义 Hook（如 usePreloadAssets()）中集中管理；
生产环境务必启用 HTTP/2 Server Push 或 CDN 缓存优化，使 preload 真正生效；
对非关键资源（如滚动后才出现的图片），仍应保留 loading="lazy" 以提升 LCP。

最终效果：用户看到的是一个空白过渡页（或品牌 Loading 动画），直到所有字体解析完毕、首屏图片解码完成，再一次性渲染完整、样式一致的页面——真正实现“所见即所载”。

如何修复 Gymso 模板中外部链接导致的 DOMException 错误

javascript如何操作CSS_如何动态修改元素的样式？

javascript如何实现绘图功能_怎样使用Canvas API

如何为菜单按钮动态切换对应色块的“激活状态”

javascript是什么_初学者如何理解这门编程语言

相关标签:

css react html go svg 浏览器 app 懒加载 ai 路由 cdn css html public promise 异步 display http

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何在 React 中实现页面完全加载（含字体、图片等资源）后再显示下一篇：JavaScript中正确生成指定范围整数随机数的方法详解

作者最新文章

重制信号？育碧重新上传《刺客信条4：黑旗》音乐原声带

2026-01-15 15:21

如何为多维嵌套数组中的每个子元素自动添加 parent_id 字段

2026-01-15 15:24

红魔高管喊话友商：所有跟进风扇的友商都欠红魔一句感谢

2026-01-15 15:25

Loguru 动态注入请求上下文实现 FastAPI 每请求日志格式定制

2026-01-15 15:27

曝Eidos 蒙特利尔疑似秘密开发“4A”级游戏项目！

2026-01-15 15:28

京东联盟app推广位置在哪

2026-01-15 15:29

Apple Watch充电器成美甲神器：内置磁铁使指甲油金属颗粒偏移

2026-01-15 15:35

小米2026年国补全面开启：全品类覆盖小米17系列到手价3999元起

2026-01-15 15:43

如何安全地重命名含空格与特殊字符的上传图片文件

2026-01-15 15:55

永远的蔚蓝星球红色武器强度介绍

2026-01-15 16:08

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

css

css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

524

2023.06.15

css居中

css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。

262

2023.07.27