直接用 标签即可加载并自动播放动态 gif，无需 javascript；其本质是浏览器原生支持的自包含动画格式，路径正确且文件完好即循环播放。
直接用 <img> 标签就能加载动态 GIF，不需要 JavaScript
动态 GIF 本质是自包含的动画格式，浏览器原生支持，<img src="animation.gif"> 就能播放——和静态图完全一样。很多人误以为要“激活”或“初始化”，其实只要路径正确、文件没损坏，它就会自动循环播放。
常见错误现象：404 Not Found（路径写错）、GIF 在本地双击能动但嵌入 HTML 后静止（服务器 MIME 类型错误或缓存了损坏版本）、图片显示为方块（文件扩展名是 .GIF 大写但服务器区分大小写）。
- 确保
src路径相对于index.html正确，比如 GIF 和 HTML 同目录就写src="loading.gif"；在assets/子目录下则写src="assets/loading.gif" - 不要用
background-imageCSS 方式加载 GIF——部分旧版 iOS Safari 会禁用背景 GIF 动画 - 避免给 GIF 设置
width/height属性时只设一个（如只设width），可能导致拉伸失真；建议用 CSS 控制尺寸更稳妥
如何控制 GIF 播放次数或暂停？浏览器不支持原生 API
HTML 标准中没有 loop、play() 或 pause() 这类 GIF 专属方法。所有“控制播放”的方案都是模拟或降级：
- 真正想限制循环次数？必须用 JavaScript 解析 GIF 帧并逐帧绘制到
<canvas></canvas>，成本高，一般没必要 - 需要“点击暂停”？实际做法是准备两张图：
animation.gif和一张对应首帧的frame1.png，用 JS 切换src - 某些工具（如
gif.js或OGV转换）可把 GIF 转成视频 +<video></video>标签，获得完整控制权，但体积通常更大、兼容性略低
为什么 GIF 在 Chrome 看着卡顿，但在 Firefox 正常？
这不是 bug，而是 Chrome 对 GIF 解码做了后台节流：当标签页非活跃、或 GIF 尺寸大（> 600×400）、或帧率过高（> 20fps）时，会主动降帧甚至暂停解码以省电。Firefox 和 Safari 行为不同，所以表现不一致。
实操建议：
- 用
gifsicle --optimize=3 --no-warnings input.gif -o output.gif压缩帧间差异，减小体积和解码压力 - 导出时限制帧率为
10–15fps（多数 UI 动效无需 30fps） - 避免在
position: fixed或频繁重绘的容器里放大尺寸 GIF，容易触发渲染瓶颈
移动端 Safari 不播放 GIF？检查是否被“低电量模式”杀死
iOS 16+ 在低电量模式下，Safari 会直接禁用所有 GIF 动画（无论是否在视口内），且不报错、不提示。这是系统级策略，网页无法绕过。
应对方式很务实：
- 别依赖 GIF 做关键反馈（比如“提交中…”），改用 CSS 动画 + SVG 图标，它不受该策略影响
- 如果必须用 GIF，加一句轻量 fallback 文案：
<img src="spin.gif" alt="加载中...">，让alt文本在动画失效时仍传达状态 - 测试时务必关闭 iPhone 的“低电量模式”，否则本地调试永远复现不了问题
onload 之后的播放事件。真正的难点从来不是插入，而是当设计要求“播三遍后停止”或“进入视口才开始”时，你得意识到：该换技术方案了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
