gif动画只播放一次onclick和mousedown

Question

我有两张图片：静态和动画。我试图播放动画图像，但只有一次。之后，它将变为静态。

我的代码：

$(document).ready(function () {
    $('#targetDIV_three').bind('click mousedown', function () {
        srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
        $("#divthree_three").attr('src', srcToGif2);
    });
});

小提琴：http://jsfiddle.net/squidraj/33Sqd/

目前，它并没有在第一个动画之后停止。

---

单动画循环gif的最新小提琴。

http://jsfiddle.net/squidraj/4rC8D/1/

现在看不到动画虽然img src正在改变。

Answer 1

如果您希望此动画GIF仅播放一次，请在Photoshop中进行修改。转到窗口＆gt;时间轴，然后选择循环选项（左下角）：

将网页另存为GIF并瞧！

Answer 2

<强> Working Fiddle

试试这个：

$(document).ready(function () {
$('#targetDIV_three').bind('click mousedown', function () {

[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);

function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}

function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
    i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
} catch(e) { // cross-domain -- mimic original with all its tag attributes
    for (var j = 0, a; a = i.attributes[j]; j++)
        c.setAttribute(a.name, a.value);
    i.parentNode.replaceChild(c, i);
}
}
      });
});

要获得所需效果，您可以设置TimeTime以触发点击事件#targetDIV_three

Answer 3

将您的代码更改为此。设置超时以再次设置旧的gif。

$(document).ready(function () {
    $('#targetDIV_three').bind('click mousedown', function () {
        srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
        $("#divthree_three").attr('src', srcToGif2);
        setTimeout(function(){
            $("#divthree_three").attr('src', "http://demo.pink-squid.co.uk/christmas/s3_bg.gif");
        },900);
    });
});

http://jsfiddle.net/33Sqd/2/