是否可以以编程方式判断webp循环的结束时间？

Question

我正在使用webp，因为我需要支持视频/ gif格式的透明度。我的问题是动画结束后我需要元素消失，而且我不确定在不进行硬编码的情况下如何准确地知道何时会发生这种情况（这可能导致较慢的硬件不一致）。

在循环遍历PNG序列之前，但性能并不理想，所以我宁愿使用这种格式。

我正在使用JavaScript，目前我只是将其放在这样的标记中：

<img src="../../../assets/animations/anim.webp">

Answer 1

当前这是不可能的。您可能要做的最好的办法就是为图像加载事件添加一个侦听器，并将计时器设置为与GIF动画相同的长度。 （类似于this answer）

<img onload="stopImage();" id="myImg" src="../../../assets/animations/anim.webp">

在JS中：

function stopImage()  {  
  setTimeout(
    () => document.getElementById('myImg').src = "../../../assets/staticImage.png"
    , 6700);   
} 

网络加载时间的确变化很大，但是对于短时动画，播放速度的变化不应有太大差异。如果需要更好的控制，则应该使用JS手动控制动画。就像您之前使用PNG序列所做的那样，或者像this answer中使用CSS Sprite Maps所建议的那样。