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>

但是你必须再次点击它才能再次播放（比如开/关开关），这有点笨拙且不太理想。

有没有人有任何解决方案？需要它在加载时是静态的，然后它会在每次单击时播放。感谢

编辑：这些答案看起来像是解决方案，但它们并不适合我。图像保持静止。我不知道其他人在屏幕上看到了什么，但我在Chrome中运行，而且在点击或鼠标移动后它仍然没有。

Answer 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;
}

Answer 2

在changeImage功能中，您可以调用setTimeout以在动画完成时将图像交换回静态版本。

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

2 个答案: