Lottie动画在Slick Carousel中无法显示该怎么解决？延迟加载策略详解

在前端项目中使用Slick Carousel作为轮播容器，同时嵌入Lottie动画实现动态效果时，经常会出现部分轮播项内的Lottie动画无法显示的问题，这本质上是轮播组件的加载机制和Lottie动画的初始化逻辑不匹配导致的。

问题产生的原因

Slick Carousel为了减少首屏加载压力，默认会对超出可视区域的轮播项做延迟加载处理，这些未加载的轮播项对应的DOM元素在初始阶段并不存在或者处于隐藏状态。而Lottie动画的初始化需要找到对应的容器DOM元素，并且容器需要有正确的尺寸和可见性，如果动画初始化时对应的轮播项还未被加载，就会出现找不到容器或者容器尺寸为0的情况，最终导致动画无法渲染。

延迟加载适配方案

方案一：监听轮播切换事件初始化动画

可以通过监听Slick Carousel的afterChange事件，在轮播项切换到可视区域时再初始化对应的Lottie动画，避免提前初始化的问题。

首先需要在HTML中定义轮播结构和Lottie容器：

<div class="slick-carousel">
  <div class="carousel-item">
    <div class="lottie-container" data-animation-path="animation1.json"></div>
  </div>
  <div class="carousel-item">
    <div class="lottie-container" data-animation-path="animation2.json"></div>
  </div>
  <div class="carousel-item">
    <div class="lottie-container" data-animation-path="animation3.json"></div>
  </div>
</div>

对应的JavaScript实现逻辑如下：

// 引入Lottie库后执行
$(document).ready(function() {
  // 初始化Slick Carousel
  $('.slick-carousel').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1
  });

  // 存储已初始化的动画实例
  const animationMap = new Map();

  // 初始化首屏动画
  const $firstItem = $('.slick-carousel .carousel-item').eq(0);
  const $firstContainer = $firstItem.find('.lottie-container');
  const firstAnimation = lottie.loadAnimation({
    container: $firstContainer[0],
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: $firstContainer.data('animation-path')
  });
  animationMap.set(0, firstAnimation);

  // 监听轮播切换事件
  $('.slick-carousel').on('afterChange', function(event, slick, currentSlide) {
    // 如果当前轮播项的动画还未初始化，则初始化
    if (!animationMap.has(currentSlide)) {
      const $currentItem = $('.slick-carousel .carousel-item').eq(currentSlide);
      const $container = $currentItem.find('.lottie-container');
      const animation = lottie.loadAnimation({
        container: $container[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: $container.data('animation-path')
      });
      animationMap.set(currentSlide, animation);
    } else {
      // 已初始化的动画可以触发播放
      animationMap.get(currentSlide).play();
    }
  });
});

方案二：关闭轮播延迟加载并预初始化动画

如果轮播项数量不多，也可以关闭Slick Carousel的延迟加载相关配置，在页面加载完成后统一初始化所有Lottie动画。

对应的配置和初始化代码如下：

$(document).ready(function() {
  // 关闭延迟加载相关配置
  $('.slick-carousel').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    lazyLoad: 'ondemand', // 如果不需要延迟加载可以注释掉这行
    // 或者设置初始加载所有轮播项
    initialSlide: 0
  });

  // 遍历所有轮播项初始化动画
  $('.lottie-container').each(function(index) {
    const container = this;
    const animationPath = $(this).data('animation-path');
    lottie.loadAnimation({
      container: container,
      renderer: 'svg',
      loop: true,
      autoplay: index === 0, // 仅首屏自动播放，其余手动控制
      path: animationPath
    });
  });
});

注意事项

• 初始化Lottie动画前需要确保对应的容器DOM已经存在于页面中，并且容器的尺寸已经正确计算，避免容器尺寸为0导致动画无法渲染。
• 如果轮播组件有隐藏轮播项的样式，需要在动画初始化前确保容器是可见的，或者在容器可见后再触发动画初始化。
• 对于不需要自动播放的动画，可以在初始化时设置autoplay: false，在轮播切换到对应项时再调用play()方法触发播放。
• 如果Lottie动画资源较大，建议结合资源预加载策略，在动画初始化前先加载对应的JSON资源，避免初始化时出现空白等待的情况。

方案对比

Lottie动画Slick_Carousel延迟加载前端动画优化轮播组件适配修改时间：2026-06-03 03:09:41