JavaScript - 动画 gif 在点击之前保持静态？答案

【问题标题】：JavaScript - Animated gif to remain static until clicked?JavaScript - 动画 gif 在点击之前保持静态？
【发布时间】：2023-03-15 10:24:01
【问题描述】：

我将 .gif 设置为只循环一次，我使用这个小代码在点击时激活它：

<img src="bird.gif" onclick='this.src=this.src'/>

问题是，当页面加载时，gif 当前正在播放，这是我不想要的。我需要图像在被点击之前保持静止。

我可以使用以下方法将静态图像与动画图像交换：

<img src="bird2.gif" onclick="changeImage(this)" />
<script>
 function changeImage(element) {
     element.src = element.bln ? "bird2.gif" : "bird.gif";
     element.bln = !element.bln;
 }
</script>

但是你必须在它再次播放之前单击它两次（就像一个开/关开关），这有点笨重而且不太理想。

有人有解决办法吗？需要它在加载时是静态的，然后每次点击它都会播放。谢谢

编辑：这些答案似乎是解决方案，但它们对我不起作用。图像保持静止。我不知道其他人在他们的屏幕上看到了什么，但我在 Chrome 中运行，点击或鼠标悬停后它仍然是。

【问题讨论】：

Stop a gif animation onload, on mouseover start the activation 的可能重复项
当页面加载时，静态图像显示在页面上。当用户单击此静态图像时，静态图像会与动画 GIF 交换。如果GIF动画播放一次或最多N次，还没有播放完，用户再次点击“图片”，GIF动画应该停止吗？ “停止”应该意味着静态图像再次替换动画 GIF 吗？如果动画 GIF 到达结尾 - 动画 GIF 中没有更多帧可显示 - 静态图像是否应该自动替换动画 GIF？
如果可能，静态图像不必自动替换动画 gif。由于我无法控制 gif 本身的动画，因此我必须以某种方式确定 gif 何时自然结束（当没有更多帧时）。如果动画还没有结束，用户再次点击图片，动画应该重新开始。

标签： javascript static onclick animated-gif

【解决方案1】：

据我所知，您无法使用 javascript 控制 gif 动画。一个好主意是有 2 张图像。一个是静态图像，另一个是单击它时播放的实际 gif。它看起来像这样（未经测试）

HTML

<img id="bird" src="bird.png"/>

jQuery:

var bird = $('#bird'),
    bird_gif = '/path/to/bird.gif';

bird.click(function() {
    bird.src = bird_gif;
});

纯javascript：

var bird = document.getElementById('bird'),
    bird_gif = '/path/to/bird_gif';

bird.onclick = function() {
    bird.src = bird_gif;
}

【讨论】：

【解决方案2】：

在您的 changeImage 函数中，您可以调用 setTimeout 以在动画完成后将图像切换回静态版本。

【讨论】：