Question

所以我有一个图像（.gif），并希望该图像只播放一次。如何仅使用HTML和JavaScript实现此目的。

我目前用于显示图像的代码是

<a href="chest_open.html"> <img border="0" src="img/chest.gif" alt="Click!"> </a>

Answer 1

使用HTML或Javascript无法实现此目的。这是在GIF中设定的。保存GIF时，尝试查找让它播放一次或永久循环的选项。

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/mf2Cc/

使用setTimeout功能并根据配置超时的gif播放时间。调用函数用静态图像替换gif。

<强> HTML： -

<a href="chest_open.html"> <img id="gifImg" border="0" src="http://www.netanimations.net/Moving-picture-treasure-chest-with-shining-gold-animated-gif.gif" alt="Click!"> </a>

<强> JS： -

setTimeout("ReplaceImage()",5000);

function ReplaceImage(){
    document.getElementById("gifImg").src="http://th00.deviantart.net/fs71/200H/i/2011/336/7/1/closed_chest_by_thesmallwonder-d4hv794.jpg";
}

Answer 3

某些GIF编辑工具可以取消激活GIF的循环模式。所以它不再循环了。所以不需要Javascript。

Answer 4

最简单的方法是制作一个只播放一次的新gif图像。或者，如果你知道这个gif图像的循环时间，例如：1s

var img = document.querySelector('img[alt="click!"]');
img.onload = function(){
    setTimeout(function(){
            img.style.display = "none";
        }, 1000);
}

仅显示一次图像

4 个答案:

试试这个： - http://jsfiddle.net/adiioo7/mf2Cc/