JavaScript

Question

我将 .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>

但是你必须点击它两次才能再次播放（就像一个 on/off 开关），这有点笨拙而且不太令人满意。

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

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

Answer 1

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

Answer 2

据我所知，您无法使用 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;
}

JavaScript - 动画 gif 在单击之前保持静态？

JavaScript - Animated gif to remain static until clicked?

static

onclick

animated-gif