Question

我嵌入了这样的gif：

<img src="myimage.gif">

加载页面时播放。我希望能够为图像启动和停止或暂停功能。 gif应该在点击时切换开始和停止。

我怎样才能做到这一点？非常感谢。

Answer 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>

您使用java脚本代码来控制Gif

Answer 2

  $('.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'));
    });

提供最佳动画您可以在java脚本文件中使用这些代码

如何在网页中控制gif？

2 个答案: