lottie 动画在 html 中不显示，通常源于引号格式错误（使用了中文全角引号“”而非英文半角引号""）或脚本加载时机不当；本文详解如何正确引入 lottie player 并确保动画正常渲染。
lottie 动画在 html 中不显示，通常源于引号格式错误（使用了中文全角引号“”而非英文半角引号""）或脚本加载时机不当；本文详解如何正确引入 lottie player 并确保动画正常渲染。
Lottie 动画依赖自定义 HTML 元素 <lottie-player> 和对应的 JavaScript 库协同工作。若动画空白无响应，首要排查点往往是引号类型——许多用户从 Lottie 官网或设计工具复制嵌入代码时，会无意中粘贴带中文全角引号（“ 和 ”）的属性值，例如：
<!-- ❌ 错误：使用了中文全角引号（U+201C / U+201D） --> <lottie-player src=“https://example.com/anim.json” loop autoplay></lottie-player>
这类引号在 HTML 解析中会被视为非法字符，导致整个标签解析失败，浏览器直接忽略该元素。正确写法必须使用标准 ASCII 双引号 " 或单引号 '：
<!-- ✅ 正确：使用英文半角引号 -->
<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>其次，脚本加载位置至关重要。Lottie Player 库必须在 <lottie-player> 标签被解析之后加载，否则浏览器尚未识别该自定义元素，便无法初始化动画。因此，推荐将 <script> 标签置于 </body> 闭合前（即 DOM 底部），而非 <head> 内：
<body>
<!-- 动画容器（位于 script 之前） -->
<lottie-player
src="https://lottie.host/.../anim.json"
style="width: 300px; height: 300px;"
loop autoplay>
</lottie-player>
<!-- ✅ 脚本紧随其后，确保 DOM 已就绪 -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="myscript.js"></script>
</body>⚠️ 注意事项：
- 避免在 <head> 中加载 lottie-player.js（除非显式添加 defer 属性）；
- 不要将脚本放在 </body> 之后（如示例中原有的 </body><script>...</script> 结构是无效的）；
- 若需在页面加载后动态控制动画，建议监听 DOMContentLoaded 或使用 lottie-player 提供的 load 事件；
- 确保 JSON 资源 URL 可公开访问且 CORS 允许（本地文件协议 file:// 下部分 Lottie 主机可能受限，建议部署到 HTTP 服务环境测试）。
遵循以上两点——修正引号为英文半角、脚本置于 </body> 前——即可解决绝大多数 Lottie 动画不显示问题，实现稳定、高性能的矢量交互动画渲染。
