直接用 <img> 标签即可加载 GIF，无需 JavaScript；其本质是浏览器原生支持的图片格式，路径正确、文件存在即可播放；常见问题源于路径错误、文件过大或系统“减少动画”设置。
直接用 <img> 标签就能加载 GIF，不需要 JavaScript
动态 GIF 本质就是一张图片文件，浏览器原生支持，<img src="xxx.gif"> 就能动起来。别被“动态”俩字吓住，它和 JPG、PNG 一样，只是格式不同。
- 确保 GIF 文件已上传到你的项目目录里（比如放在
images/animation.gif） -
src路径写对：相对路径常见错误是漏掉./或多写斜杠，比如src="images/animation.gif"（当前 HTML 在根目录时） - 不用加
type或额外属性——GIF 的 MIME 类型（image/gif）由服务器或文件后缀自动识别 - 如果不动，先检查控制台有没有
404 (Not Found)错误，大概率是路径错了
GIF 加载慢或首帧卡顿？优先查文件大小和编码方式
不是代码问题，是 GIF 本身太重。一个 5MB 的 GIF 在手机上可能要等好几秒才开始动，甚至触发浏览器的“暂停动画”策略（Chrome 对大 GIF 会静音+暂停）。
- 用工具压缩：推荐
gifsicle命令行工具或在线网站如ezgif.com，重点关掉“保留所有帧”选项，删掉冗余像素 - 避免用视频转 GIF：先转成 MP4，再用
<video>标签循环播放，体积通常小 5–10 倍 - 别给 GIF 设
width/height属性强制缩放——会模糊且拉伸失真；用 CSSmax-width: 100%更安全
想控制 GIF 播放/暂停？纯 HTML 不行，得用 JS + Canvas 拆帧
浏览器不提供 play() / pause() 方法给 <img> 标签。所谓“控制 GIF”，实际是把 GIF 拆成一帧帧 PNG，用 JS 控制绘制节奏。
- 简单方案：用现成库如
gif.js或omggif解析 GIF 数据，但需服务端配合或提前预处理 - 轻量替代：改用
<video>标签包裹 MP4/WebM，支持play()、pause()、currentTime精确控制 - 注意：某些 GIF 有透明通道，转视频时要选支持 alpha 的编码参数（如 FFmpeg 加
-vcodec libx264 -pix_fmt yuva420p）
移动端 Safari 不动？检查是否启用了“减少动画”系统设置
iOS/macOS 的“减少动画”开关（在「辅助功能 → 动态效果」里）会全局禁用 GIF 动画，连 <img> 都不放行——这不是你代码的问题，用户侧限制。
立即学习“前端免费学习笔记（深入）”；
- 无法绕过，但可降级：用 CSS
@media (prefers-reduced-motion: reduce)检测，切换为静态图或 CSS 动画 - 示例：
<img src="animation.gif" alt="loading" class="gif-fallback"><br><style><br>@media (prefers-reduced-motion: reduce) {<br> .gif-fallback { content: url(static.png); }<br>}</style> - 别依赖 JS 检测
window.matchMedia，因为 Safari 对 GIF 的禁用发生在渲染层，JS 拿不到播放状态
