Can I load an animated gif without playing an animation?

Question

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

I already fear that this is impossible, and I have to extract the first frame and display it on the canvas ...: /

Answer 1

This is kind of an expensive solution, but if you reset the SRC image to a very short setInterval, it looks like a static one, for example:

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

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

Answer 2

Perhaps this is too simple an answer for you, but you can simply open the animated GIF in an image editing program of your choice, that is, Adobe Photoshop or any other free one, and then just save the GIF without animation.

Then reload the new GIF (without animation) to where you display your images.

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

Just delete all frames and save as. Just don't overwrite the original with animation if you still need it.