How to make a gif run only once?

Navigation
16

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

    
asked by anonymous 16.12.2015 / 16:54

2 answers

6

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, the duration of .gif) the animated image will be removed and in its place the canvas will be displayed:

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'/>
    
16.12.2015 / 18:34
7

Look Daniel found something that might help you: link

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

Include gifffer.min.js on the page. 

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

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

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

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

window.onload = function() {
    Gifffer();
}
    
16.12.2015 / 17:00
Best Practices for Inserting, Altering, and Deleting with EntityFramework Differences between JSF and JSP