How to make a gif run only once?

Question

I have a GIF and I want it to only run once, with no repetitions. Is there any way to do this? How?

Answer 1

Look Daniel I found something that can help you: https://github.com/krasimir/gifffer

With it you can make the gif "touch" once.

Include the gifffer.min.js on the page.

<script type="text/javascript" src="gifffer.min.js"></script>

Instead of assigning value in your image’s src, use the data-gifffer.

 <img data-gifffer="image.gif" />

And finally add the call from Grifffer(); where you want. For example:

window.onload = function() {
    Gifffer();
}

Answer 2

Open the image in a graphical editor and remove the infinite loop option.

Now, with Javascript you can create a static image in a canvas. And after a while (in this case, duration of .gif) the animated image will be removed and in its place the canvas will be shown:

Fiddle

(function(){
  
  var $gif         = document.querySelector('.gif'),
      GIF_DURATION = 1050;

  function handleGif(){
    
    // Cria o canvas com o mesmo tamanho da imagem.
    var $canvas = document.createElement('canvas');
    $canvas.setAttribute('width', $gif.width);
    $canvas.setAttribute('height', $gif.height);
    
    // Desenha a imagem no canvas
    var context = $canvas.getContext('2d');
    context.drawImage($gif, 0, 0);
    
    // Remove a imagem e insere o canvas
    document.body.removeChild($gif);
    document.body.appendChild($canvas);
  }
  
  var timeout = setTimeout(function(){
  	handleGif();
    clearTimeout(timeout);
  }, GIF_DURATION);
  
})();

<img class='gif' src='http://i.stack.imgur.com/l7bin.gif'/>