如何修复Lottie Animation动画重复显示的问题

算力阿峰

2026-9-26

解决Lottie动画重复显示的方案

脚本引入位置修正
你当前将lottie.js和script.js放在了列容器内部，若页面存在多个同类容器或全局已重复引入过这两个脚本，会导致Lottie动画被多次初始化。请将两个脚本的引入语句移动到页面</body>标签之前的全局位置，全程仅引入一次即可。

动画初始化逻辑优化
多次调用lottie.loadAnimation()绑定同一个DOM元素会生成多个叠加的动画实例，你可以在初始化前先销毁已存在的对应实例，参考代码：

// 销毁目标元素已绑定的Lottie实例
const existAnim = lottie.getRegisteredAnimations().find(item => item.wrapper.id === 'F1')
if (existAnim) {
  lottie.destroy('F1')
}
// 初始化新动画
lottie.loadAnimation({
  container: document.getElementById('F1'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '你的动画资源JSON路径'
})

修复DOM结构错误
你提供的代码中<div id="F1"></div>后存在多余的</a>闭合标签，无对应的<a>起始标签，该错误会导致浏览器自动补全DOM结构，生成额外的容器触发重复渲染，删除多余的</a>即可。
添加样式约束
若动画挂载元素未设置固定宽高，可能会因为渲染内容溢出出现视觉上的重复效果，给目标元素添加如下样式：
```
#F1 {
  width: 你需要的宽度值;
  height: 你需要的高度值;
  overflow: hidden;
}
```