Lottie动画必须通过lottie.loadAnimation()加载，container需为真实DOM元素且已渲染，path须为可访问的HTTP(S)路径，JSON需合法无误，推荐renderer: 'svg'。
直接用 <img> 或 <iframe> 加载 Lottie JSON 文件必然失败——浏览器会尝试按图像或页面解析，触发 406 错误或 MIME 类型警告。必须通过 lottie.loadAnimation() 主动加载并挂载到 DOM 容器。
container 必须是真实 DOM 元素，不是字符串或 jQuery 对象
常见错误是传 '#anim' 或 $('anim')，lottie.loadAnimation() 的 container 参数只接受原生 DOM 元素（如 document.getElementById('anim')）。若容器尚未渲染完成（比如脚本写在 <head>），调用会返回 null，导致白屏无报错。
- 确保脚本放在
</body>前，或包裹在DOMContentLoaded回调里 - 加判空保护：
const el = document.getElementById('anim'); if (el) { lottie.loadAnimation({ container: el, ... }) } - 不要给容器设
display: none——Lottie 初始化时需读取宽高，隐藏元素会返回0，动画不显示
path 是 URL，不是本地文件路径，跨域要配 CORS
path 必须是能被浏览器 fetch 到的 HTTP(S) 路径，例如 '/assets/loading.json'。写成 './animation.json' 在某些开发服务器下可能工作，但一旦部署到 CDN 或子路径就容易 404；写成 'file:///xxx.json' 在 Chrome 等现代浏览器中直接被 CORS 拦截，控制台报 Failed to fetch。
- 静态资源统一放
/assets/下，用相对根路径（/assets/xxx.json）最稳 - 若 JSON 存在另一域名（如 cdn.example.com），服务端必须返回
Access-Control-Allow-Origin: * - 调试时可临时用 Chrome 的 “Disable cache” + “Disable CORS” 插件辅助定位，但不可作为上线方案
用 animationData 内联小动画，避免额外请求
动画 JSON 小于 5KB 时，内联进 HTML 可省一次 HTTP 请求，首屏更快。但 JSON 必须合法、无 BOM、无尾逗号、换行和单引号需转义——复制粘贴时极易出错。
立即学习“前端免费学习笔记（深入）”；
- 把 JSON 放在
<script type="application/json" id="anim-data">标签里，再用JSON.parse(document.getElementById('anim-data').textContent)读取 - VS Code 中右键 → “Save with Encoding” → 选 “UTF-8”（不含 BOM）
- 用 jsonlint.com 验证格式，尤其注意最后一行不能有逗号
- 内联后，
lottie.loadAnimation()中删掉path，改用animationData: data
renderer: 'svg' 是默认且推荐选项，canvas 不是万能替代
SVG 渲染器清晰、缩放无损、支持 CSS 控制部分样式（如 fill）、兼容性好（iOS Safari ≥13，Chrome ≥60），是绝大多数场景首选。Canvas 虽然在极复杂粒子动画中帧率略高，但高 DPI 屏幕易模糊，且 iOS Safari 对滤镜/clipPath 支持不全，反而增加兼容性风险。
- 除非明确需要 WebGL 加速或已验证 SVG 卡顿，否则不要主动设
renderer: 'canvas' - 如果必须用 Canvas，记得加
rendererSettings: { preserveAspectRatio: 'xMidYMid slice' }避免拉伸 - 所有交互操作（播放/暂停/跳帧）一律走 Lottie 实例 API，别手动操作生成的
<svg>内部节点——结构扁平无语义，随时可能变
真正卡点不在“怎么写”，而在 JSON 文件是否干净、容器是否就绪、路径是否可访问——这三个条件缺一不可。哪怕参数全对，只要 JSON 里多一个逗号或容器晚渲染 1ms，动画就静默失败。建议每次集成后，先打开 DevTools Network 面板确认 JSON 成功加载，再看 Console 是否有 Cannot read property 'appendChild' of null 类报错，最后检查 Elements 面板里容器内部是否生成了 <svg> 节点。
