Lottie 网络图像序列 - 加载图像后启动动画答案

【问题标题】：Lottie web image sequence - start animation after loading imagesLottie 网络图像序列 - 加载图像后启动动画
【发布时间】：2020-06-17 15:16:16
【问题描述】：

我正在使用 Airbnb 的 Lottie 从加载页面时播放的 jpg 序列创建动画。问题是动画在网页打开后立即开始，但似乎在图像加载时动画已经一半甚至结束。处理这个问题的最佳方法是什么，以便用户从一开始就看到动画？

我尝试过同时使用DOMLoaded 和data_ready 事件监听，但它们似乎都不能解决问题。

目前我的代码如下：

      var params = {
        container: document.getElementById('hero-anim'),
        animationData: animationData,
        renderer: 'svg',
        loop: false,
        autoplay: false,
      };

      var anim = lottie.loadAnimation(params);
      anim.addEventListener('DOMLoaded', lottie.play());

使用它的网站：test.romancecapsule.com

请问有什么解决办法吗？我遇到的另一个问题是在 Firefox（mac，v70.0.1）中，它在每个图像之间闪烁白色。

谢谢

【问题讨论】：

标签： javascript html lottie

【解决方案1】：

您可以使用jiagra 来预取您的代码图像。

下载 js 库并将其导入到您的代码中。然后预取之前要加载的图片。

<script src="jiagra.js"></script>
...
<link rel="prefetch"  href="/images/animation_frame1.jpeg">

阅读更多关于Chrome Prerendering：

阅读更多关于Firefox Prefetching的信息：

【讨论】：

感谢您的回复。预取能解决我的问题吗？因为我将在我的主页顶部使用动画？

【解决方案2】：

Lottie 有loaded_images 事件，当所有图像加载成功或失败时触发。您可以将其用作：

anim.addEventListener('loaded_images', lottie.play());

在您的代码中。应该可以解决您的问题。

【讨论】：