在 React 中加载动画 GIF

在 React 网页应用中显示动态 GIF，可以使用 <img> 元素加载本地资源或托管 URL，也可以将 GIF 设置为 CSS 背景图。若将其用作加载指示器，请为图像提供有意义的替代文本，并仅在相关操作仍在进行时显示它。具体使用哪种资源语法，取决于项目的打包工具和配置。

方法 1：直接导入 GIF

如果 GIF 属于应用的一部分，并且需要与代码一起纳入版本管理，可以将它保存在项目中。在已配置为支持导入图像资源的项目里，可以将导入语句和组件写在一起，例如 import loadingGif from './assets/loading.gif'; function LoadingGif({ loading }) { return loading ? <img src={loadingGif} alt="Loading results" width={48} height={48} /> : null; }。请将 ./assets/loading.gif 替换为你的文件路径。组件会把导入的资源值传给 src；资源导入由项目工具链处理，有些项目则使用公共目录中的路径。如果工具无法识别该导入，请查阅构建工具的资源处理说明。某些工具链也接受 require() 语法，但它不能普遍替代 import，也不会自行配置 GIF 处理方式。

这段普通 JavaScript 示例展示了待处理请求所选用的图像属性。其中的 alt 标签文字“Loading results”保留为英文：

const loading = true;
const loadingGif = { src: "/assets/loading.gif", alt: "Loading results" };
const image = loading ? loadingGif : null;

if (image) {
  console.log(`${image.src} | ${image.alt}`);
}

/assets/loading.gif | Loading results

在 JSX 中使用相同的 loading 条件，即可仅在请求待处理时渲染已导入的资源。

alt 文本应简洁地说明图像的用途。如果 GIF 只是装饰，而且旁边的文字已经说明“正在加载”，可以使用 alt=""，避免向屏幕阅读器用户重复相同信息。已知图像尺寸时，请提供尺寸，以便预留布局空间。较大的 GIF 文件可能拖慢加载并消耗带宽，因此可以缩小尺寸、减少帧数，或根据设计考虑使用合适的视频或其他动画格式。

方法 2：使用 URL 引用外部 GIF

如果不想将资源打包进应用，可以使用托管 GIF 作为图像源。下面的 URL 仅为示意占位符；请将它替换为可信托管服务提供的稳定 URL，并像本地图像一样提供有意义的替代文本：

<img src="https://example.com/loading.gif" alt="Loading results" width="48" height="48">

完整组件可以直接使用托管 URL；请将占位 URL 替换为图像地址：

function ExternalGif() { return <img src="https://example.com/loading.gif" alt="Loading results" width={48} height={48} />; }

浏览器会向该托管服务请求图像，并按指定尺寸显示。请确认托管服务允许你的网站显示该图像，并且这个 URL 会持续可用。第三方服务器可能响应缓慢、限制请求频率或无法访问；CDN 在某些部署方式下可能有所帮助，但不能保证更快送达。对于关键的加载指示器，可以准备一个较小的本地备用资源，或使用不依赖远程图像的 CSS 旋转指示器。

方法 3：将 GIF 用作 CSS 背景图

当动画用于装饰固定尺寸的区域（例如横幅）时，CSS 背景图很实用。下面的 CSS 规则与 JSX 元素需要配合使用：区域宽 320 像素、高 180 像素；cover 会缩放 GIF 以填满区域，也可能裁去部分图像。center 会让裁切位置保持居中。

在 CSS 和 JSX 中使用相同的 gif-background 类名：CSS .gif-background { width: 320px; height: 180px; background-image: url('/assets/banner.gif'); background-size: cover; background-position: center; } 和 JSX <div className="gif-background" aria-hidden="true" />。背景图会在该尺寸的区域内显示 GIF 作为装饰。背景图没有 img 的替代文本属性，因此如果动画传达了附近文字未表达的信息，就不要使用这种方式。如果文字叠加在动态图像上，请检查动画播放过程中对比度是否始终足够；添加不透明或半透明的遮罩层有助于保持文字清晰可读。CSS 背景图的加载方式和资源 URL 处理也取决于项目的构建配置。

总结

应用自有资源适合使用本地导入；由可靠托管服务提供的图像可以使用外部 URL；固定尺寸区域中的装饰动画则适合用作 CSS 背景图。对于加载状态，应优先选择较小的资源、清晰的状态文字和便于访问的备用方案。请在项目的实际配置中检查图像 URL 和加载行为，因为不同的打包工具和托管服务处理资源的方式各不相同。

常见问题

GIF 加载时如何显示占位内容？

使用 React state 跟踪图像的加载状态，并处理图像的 onLoad 和 onError 事件。例如，从 React 导入 useState，然后使用 function LoadingGif({ src }) { const [status, setStatus] = useState('loading'); return <>{status === 'loading' && <p role="status">Loading results</p>}{status === 'error' ? <p role="alert">The image could not be loaded.</p> : <img src={src} alt="" onLoad={() => setStatus('loaded')} onError={() => setStatus('error')} />}</>; }。将导入的资源或托管 URL 作为 src 传入。status 角色会为加载提示提供状态语义，使辅助技术能够以礼貌的方式播报这一动态变化。图像加载期间会显示提示文字；触发 onLoad 后，提示消失；触发 onError 后，提示则替换为错误信息，并保留其警示行为。如果 GIF 仅用于装饰，可以用文字传达状态，同时为图像设置空替代文本。示例中的提示和错误文字保留为英文。

如何优化 GIF？

将 GIF 调整到屏幕上所需的最大尺寸，并删除不必要的帧。比较调整后的文件大小和画面质量。对于较长或细节丰富的动态内容，视频或其他动画格式可能更合适；具体支持情况和备用方案取决于目标浏览器与资源交付配置。

React 能控制 GIF 的播放吗？

动态 GIF 会根据文件中保存的帧和循环数据播放，因此可能只播放一次，也可能重复播放。<img> 元素不提供类似视频的播放和暂停控件。如果用户需要播放控件，请使用视频元素，或选择能够提供这些控件的动画方案。