After Effects导出Lottie动画网页无法加载，请求排查代码问题

• DOM元素相关问题
  你代码中绑定的容器是id为bm的DOM节点，要保证两个前提：
  1. 页面中存在对应节点：<div id="bm" style="width: 动画需要的宽度; height: 动画需要的高度;"></div> 注意容器必须设置宽高，没有宽高动画也会显示不出来
  2. JS执行时DOM已经渲染完成：要么把JS代码放在</body>标签之前，要么用DOM加载完成事件包裹代码，示例如下：

  <script src="lottie.js"></script> 
  <script>
  // 等待DOM全部加载完成再执行初始化逻辑
  document.addEventListener('DOMContentLoaded', function() {
    var animation = bodymovin.loadAnimation({
        container: document.getElementById('bm'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: 'data.json'
    })
  })
  </script>
  

• 资源路径错误
  打开浏览器开发者工具的「网络」面板，刷新页面查看lottie.js和data.json两个资源的请求状态，如果是404说明路径填写错误，需要根据你的文件存放位置调整路径。比如如果JSON文件放在static文件夹下，path就要改成'static/data.json'。
• 本地file协议跨域限制
  如果你是直接双击打开HTML文件（地址栏为file://开头），浏览器默认会禁止加载本地JSON文件，导致动画加载失败。可以用本地静态服务启动页面测试，比如VS Code的Live Server插件、Python自带的http.server等。
• 版本不匹配
  确认AE导出用的Bodymovin插件版本，和你引入的lottie.js版本兼容，建议两边都升级到最新稳定版本后重新导出测试。
• JSON文件损坏
  如果网络面板显示data.json加载成功但是还是不显示，可以把JSON内容和演示文件里的JSON对比，看是不是导出的时候文件损坏、有内容缺失。

内容的提问来源于stack exchange，提问作者Anjana Dep