gif animation play only once onclick and mousedown

问题:

I have two images: static and animated. I am trying to play that animated image but only once. After that, it will change to static one.

My Code:

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

Fiddle : http://jsfiddle.net/squidraj/33Sqd/

Currently, it is not stopping after the first animation.

---

Latest fiddle with single animated loop gif.

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

Now can't see the animation though the img src is changing.

回答1:

If you want this animated GIF to be played only once, modify it in Photoshop. Go to Window > Timeline, then select looping options (bottom left corner):

Save for web as GIF and voila!

回答2:

Working Fiddle

Try This:

$(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);
}
}
      });
});

For getting desired effect you can setTimeout to trigger click event #targetDIV_three

回答3:

Chnage your code to this. A timeout is set to set the old gif again.

$(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/