是否可以通过编程方式判断 webp 循环何时结束？

Question

我正在使用 webp，因为我需要 video/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 精灵贴图。

Is it possible to programmatically tell when the end of a webp loop is?