1

I embedded a gif like this: 

<img src="myimage.gif">

This plays when the page is loaded. I want to be able to have a start and stop or pause functionality for the image. The gif should toggle start and stop on click.

How can I achieve this? Many Thanks.

Somename
  • 3,376
  • 16
  • 42
  • 84
  • http://www.pcworld.com/article/2842792/how-to-create-a-high-quality-animated-gif.html you check this link – Ashish Shahi Apr 01 '17 at 06:53
  • Possible duplicate of [Can you control GIF animation with Javascript?](http://stackoverflow.com/questions/2385203/can-you-control-gif-animation-with-javascript) – jakeehoffmann Apr 01 '17 at 06:54

2 Answers2

1
<script type="text/javascript" src="./libgif.js"></script>
<img src="./example1_preview.gif" rel:animated_src="./example1.gif"
 width="360" height="360" rel:auto_play="1" rel:rubbable="1" />

<script type="text/javascript">
    $$('img').each(function (img_tag) {
        if (/.*\.gif/.test(img_tag.src)) {
            var rub = new SuperGif({ gif: img_tag } );
            rub.load(function(){
                console.log('oh hey, now the gif is loaded');
            });
        }
    });
</script>

You use java script code to control Gif

Ashish Shahi
  • 268
  • 1
  • 17
1
  $('.gifs a').embedly({
      display: function(obj){
        if (obj.type === 'photo'){

          var $this = $(this);

          // Create the static image src with Embedly Display.
          var src = $.embedly.display.display(obj.url, {query: {animate:false} });

          // Add static gif placeholder to the parent
          $this.html('<img class="gif-holder" src="'+src+'" />');

          // Start preloading the actually gif.
          $this.append('<img class="gif-preload" src="'+obj.url+'" />');

          // Create a promise so we can keep track of state.
          $this.data('promise', $.Deferred());

          // Get the element we added.
          var elem = $this.find('.gif-preload').get(0);

          // If the image is not in cache then onload will fire when it is.
          elem.onload = function(){
            $this.data('promise').resolve();
          };

          // If the image is already in the browsers cache call the handler.
          if (elem.complete) {
            $this.data('promise').resolve();
          }
          // Set the static gif url so we can use it later.
          $(this).data('static_url', src);
        } else {
          // remove li if it's not an image.
          $(this).parent().remove();
        }
      }
    }).on('mouseenter', function(){
      var $this = $(this);

      // Set the hover state to true so that the load function knows to run.
      $this.data('hover', true);

      // Create a function to load the gif into the image.
      var load = function(){
        if ($this.data('hover') === true){
          // Remove the loading image if there is one
          $this.find('.gif-loading').remove();

          // Swap out the static src for the actually gif.
          $this.find('img.gif-holder').attr('src', $this.data('embedly').url);
        }
      };
      // Add the load function to the done callback. If it's already resolved
      // this will fire immediately.
      $this.data('promise').done(load);

      // Add a spinner if it's not going to play right away.
      if ($this.data('promise').state() === 'pending'){
        // Add a loading spinner.
        $this.append('<i class="gif-loading fa fa-spinner fa fa-spin"></i>');

        // we need to center it over the image.
        $this.find('.gif-loading').css({
          top: $this.height() / 2 - 20,
          left: $this.width() / 2 - 20
        });
      }
    }).on('mouseleave', function(){
      var $this = $(this);

      // Make sure the load function knows we are no longer in a hover state.
      $this.data('hover', false);

      // Remove the spiner if it's there.
      $this.find('.gif-loading').remove();

      // Set the src to the static url.
      $this.find('img.gif-holder').attr('src', $(this).data('static_url'));
    });

Giving best animation You can use these codes in java script file