lottie 动画在 html 中不显示，通常源于引号格式错误（使用了中文全角引号“”而非英文半角引号""）或脚本加载位置不当。本文详解问题根源、正确嵌入方式及最佳实践，助你快速启用 lottie 交互动画。
lottie 动画在 html 中不显示，通常源于引号格式错误（使用了中文全角引号“”而非英文半角引号""）或脚本加载位置不当。本文详解问题根源、正确嵌入方式及最佳实践，助你快速启用 lottie 交互动画。
Lottie 动画依赖自定义 Web Component（<lottie-player>）渲染，其正常运行需满足两个前提：语法合法与执行时机可靠。最常见的失效原因，恰恰隐藏在看似无害的引号中。
? 问题根源：隐形的“中文引号”陷阱
在从 LottieFiles 等平台复制嵌入代码时，部分编辑器或网页会将英文双引号 " 自动转换为中文全角引号 “ 和 ”（Unicode：U+201C / U+201D）。HTML 解析器无法识别此类字符，导致属性值解析失败，整个 <lottie-player> 标签被忽略——动画自然不会渲染。
❌ 错误示例（含全角引号）：
<lottie-player src=“https://lottie.host/.../SQ1XbCeUpR.json” ...></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"）可快速定位异常引号；粘贴代码后建议全选 → 使用英文输入法重新输入引号。
? 正确加载顺序：脚本必须置于 <body> 底部
Lottie Player 是一个基于 Custom Elements 的 Web Component，需在 DOM 元素创建之后才能升级（upgrade）并初始化。若将 <script> 放在 <head> 中，脚本会提前执行，此时 <lottie-player> 尚未被 HTML 解析器读取，组件无法绑定。
⚠️ 不推荐的位置：
- <head> 内引入脚本（DOM 未就绪）
- </body> 之后引入脚本（违反 HTML 结构规范）
✅ 推荐位置：</body> 之前，紧邻 Lottie 元素下方（或页面末尾）：
<body>
<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>
</body>✅ 完整可运行示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Lottie 动画示例</title>
</head>
<body>
<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>
</body>
</html>⚠️ 注意事项与进阶建议
- CDN 稳定性：生产环境建议锁定版本（如 @1.7.0），避免因最新版 API 变更导致意外中断；
- 加载状态处理：可通过 onLoad、onError 事件监听动画状态，添加 loading 占位符；
- SEO 与可访问性：为 <lottie-player> 添加 aria-label 或 <title> 子元素，提升无障碍体验；
- 性能优化：大体积 JSON 动画可考虑懒加载（loading="lazy" + IntersectionObserver 触发播放）。
遵循以上规范，95% 的 Lottie 显示问题可即时解决。记住核心口诀：英文引号保语法，脚本靠底保时机。
