问题:

I wonder if there is a way to prevent a browser from actually animating an animated gif, loaded in a <img> tag. I just want it to display the first frame of the gif and don't play the animation.

I already fear that this isn't possible and I have to extract the first frame and render it to a canvas... :/

回答1:

This is kinda an expensive solution, but if you reset image SRC on a very short setInterval it appears as static e.g:

setInterval(function() {
       document.getElementById('img1').src = document.getElementById('img1').src
},1)

Demo: http://jsfiddle.net/MEaWP/6/

回答2:

Maybe this is too simple an answer for you but you could just open the animated GIF in a image editing program of your choice, i.e. Adobe Photoshop or any other free one, and then just save out the GIF without the animation.

Then re-upload the new GIF (without the animation) to wherever you are serving your images from.

If you do use Photoshop you can simply open the file.GIF and go to Window>Animation in the Menu. This will display all the frames in the animated GIF in a new dialog box.

Just delete all the frames and Save As. Just don't overwrite the original with the animation if you will still need that later.