使用javascript点击播放/停止gif答案

【问题标题】：play/stop gif on click using javascript使用javascript点击播放/停止gif
【发布时间】：2017-03-03 21:04:03
【问题描述】：

我想要一个 gif 在单击时播放，并在再次单击时停止。我正在遵循这种方法：http://www.hongkiat.com/blog/on-click-animated-gif/

到目前为止，我有：

HTML

<figure>
 <img src="test.png" alt="Static Image" data-alt="test.gif"/>
</figure> 

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

playGif.js

(function($) {  
    // retrieve gif
    var getGif = function() {
        var gif = [];
        $('img').each(function() {
            var data = $(this).data('alt');
            gif.push(data);
        });
        return gif;
    }
    var gif = getGif();

    // pre-load gif
    var image = [];
    $.each(gif, function(index) {
        image[index]     = new Image();
        image[index].src = gif[index];
    });

    // swap on click
    $('figure').on('click', function() {
        var $this   = $(this),
            $index  = $this.index(),
            $img    = $this.children('img'),
            $imgSrc = $img.attr('src'),
            $imgAlt = $img.attr('data-alt'),
            $imgExt = $imgAlt.split('.');

        if($imgExt[1] === 'gif') {
            $img.attr('src', $img.data('alt')).attr('data-alt', $imgSrc);
        } else {
            $img.attr('src', $imgAlt).attr('data-alt', $img.data('alt'));
        }
    });
})(jQuery);

这里没有交换src和data-alt的内容，只是把data-alt放到src中，data-alt保持不变。

gif 确实会在点击时播放，但如果再次点击它会重新加载 gif 而不是恢复为 png（至少在 Chrome 和 Firefox 中。IE 在进一步点击时不会执行任何操作）。

【问题讨论】：

我个人会使用类或数据标签来标记它当前是 gif 还是 png，每次检查文件扩展名有点乱，如果图像名称有 @987654326 会中断@ 在扩展名之前。
您的实际代码是否将这些名称用于 imgs ？ ...如果不是我能看到的唯一问题是，如果路径有多个 .，则代码将 src 拆分为 gif 则 $imgExt[1] 无用 codepen.io/anon/pen/LRrZqx
Stopping GIF Animation Programmatically的可能重复
@MikeMcCaughan 不，不是，这是 var 交换，并不是真正停止 gif 动画。

标签： javascript jquery html gif

【解决方案1】：

这是完成的 jsfiddle：https://jsfiddle.net/2060cm1c/

这是一个简单的变量交换问题：

a=1;b=2;
a=b;// now a=2
b=a;// a=2, b=a=2

要解决它，你需要一个临时变量：

a=1;b=2;
temp=a;a=b;
b=temp;

现在解决OP的问题：

var temp=$img.attr('src');
$img.attr('src', $imgAlt).attr('data-alt', temp);

因此，问题就像交换 2 个变量一样简单。您不需要if 来检查扩展名。

【讨论】：