WordPress站点Lottie animation文件无法播放故障排查求助

• 最新版lottie-player脚本兼容性问题
  你当前引入的是@latest版的lottie-player公共库，官方版本迭代可能带来兼容性故障。将引入地址替换为稳定的历史固定版本测试即可验证：
  <script src="https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js"></script>

• 轮播组件DOM操作冲突
  动画放在轮播项内时，绝大多数轮播插件（如Swiper、Owl Carousel）初始化时会克隆、重排、覆盖轮播节点，导致刚初始化完成的lottie-player实例被销毁，是闪现后消失的典型诱因。验证方式：临时禁用轮播功能，直接输出三个lottie-player标签到页面，若能正常播放即可确认是轮播冲突。
  解决方案：将lottie初始化逻辑延后到轮播完全初始化完成后触发，或关闭轮播的loop克隆、动态DOM修改相关配置。

• 父容器高度/全局CSS覆盖问题
  你给lottie-player设置的是height:100%，若父级轮播项未设置固定高度，或站点全局CSS给lottie-player元素设置了display:none、opacity:0、visibility:hidden等属性，都会导致动画加载后隐藏。可打开浏览器开发者工具，选中对应lottie-player元素查看计算样式，即可快速定位CSS问题。

• 自定义标签加载冲突
  你站点其他位置用不同配置可正常播放Lottie，若其他位置用的是lottie-web JS API加载而非<lottie-player>自定义标签，大概率是主题/插件的JS逻辑对自定义元素做了拦截处理。可将当前区块的加载逻辑替换为和其他正常位置一致的JS API调用方式测试，示例代码如下：

// 先引入lottie-web库，再按ID对应容器加载
const fpsAnimation = lottie.loadAnimation({
  container: document.getElementById('fps-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '<?php echo get_stylesheet_directory_uri(); ?>/animations/fps.json'
})

• ACF字段输出异常验证
  当前代码中用the_sub_field('lottie_animation')输出JSON文件名，可直接在页面对应位置打印该字段值，确认循环输出时没有空值、拼写错误或字段名不匹配的问题。

内容的提问来源于stack exchange，提问作者Inventive Web Design