lottie 动画在 html 中不显示，通常源于引号格式错误（使用了中文全角引号“”而非英文半角引号""）或脚本加载位置不当。本文详解问题根源、正确嵌入方式及最佳实践，助你快速启用 lottie 交互动画。
lottie 动画在 html 中不显示，通常源于引号格式错误（使用了中文全角引号“”而非英文半角引号""）或脚本加载位置不当。本文详解问题根源、正确嵌入方式及最佳实践，助你快速启用 lottie 交互动画。
Lottie 动画依赖自定义 Web Component（
? 问题根源：隐形的“中文引号”陷阱
在从 LottieFiles 等平台复制嵌入代码时，部分编辑器或网页会将英文双引号 " 自动转换为中文全角引号 “ 和 ”（Unicode：U+201C / U+201D）。HTML 解析器无法识别此类字符，导致属性值解析失败，整个
❌ 错误示例（含全角引号）：
<lottie-player src="%E2%80%9Chttps://lottie.host/.../SQ1XbCeUpR.json%E2%80%9D" ...></lottie-player><!-- ↑ 这里的 “ 和 ” 是无效字符，浏览器报错：Uncaught SyntaxError -->
✅ 正确写法（统一使用英文半角引号）：
<lottie-player src="https://lottie.host/b35cc63e-e72a-4978-add6-d71a6cbcfdab/SQ1XbCeUpR.json" background="#ffffff" speed="1" style="width: 300px; height: 300px;" loop controls autoplay direction="1" mode="normal"></lottie-player>
? 提示：在 VS Code、Sublime Text 等编辑器中，开启「显示不可见字符」（如 editor.renderWhitespace: "all"）可快速定位异常引号；粘贴代码后建议全选 → 使用英文输入法重新输入引号。
? 正确加载顺序：脚本必须置于 底部
Lottie Player 是一个基于 Custom Elements 的 Web Component，需在 DOM 元素创建之后才能升级（upgrade）并初始化。若将 <script> 放在 <head> 中，脚本会提前执行，此时 <lottie-player> 尚未被 HTML 解析器读取，组件无法绑定。</script>
⚠️ 不推荐的位置：
- 内引入脚本（DOM 未就绪）
- 之后引入脚本（违反 HTML 结构规范）
✅ 推荐位置： 之前，紧邻 Lottie 元素下方（或页面末尾）：
<lottie-player src="https://lottie.host/.../SQ1XbCeUpR.json" style="width: 300px; height: 300px;" autoplay loop></lottie-player><!-- ✅ 脚本置于 body 内末尾，确保 DOM 已加载 --><script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script><script src="myscript.js"></script>
✅ 完整可运行示例
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lottie 动画示例</title><lottie-player src="https://lottie.host/b35cc63e-e72a-4978-add6-d71a6cbcfdab/SQ1XbCeUpR.json" background="#ffffff" speed="1" style="width: 300px; height: 300px;" loop autoplay mode="normal"></lottie-player><!-- 关键：脚本必须在此处 --><script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
⚠️ 注意事项与进阶建议
- CDN 稳定性：生产环境建议锁定版本（如 @1.7.0），避免因最新版 API 变更导致意外中断；
- 加载状态处理：可通过 onLoad、onError 事件监听动画状态，添加 loading 占位符；
-
SEO 与可访问性：为
添加 aria-label 或 子元素，提升无障碍体验； - 性能优化：大体积 JSON 动画可考虑懒加载（loading="lazy" + IntersectionObserver 触发播放）。
遵循以上规范，95% 的 Lottie 显示问题可即时解决。记住核心口诀：英文引号保语法，脚本靠底保时机。
