GIF图片播放问题

恭喜自己又踩到了个坑，说说怎么踩到这个坑的吧。

这几天在弄欧洲杯的一个公众号吸粉页面，其中页面与页面之间切换，有个gif的过渡效果，写完一试发现过渡的gif只动了一次，再次切换都是空白了，查了下说是gif导出的时候选的是执行一次，不是循环执行，叫小崔同学帮忙改成循环执行，再一看，这次是没空白了，gif也一直在动，但是一直在动啊，跟setTimeout一配合，节奏就全乱了，切换的时候，gif动画动的时候有时候快，有时候慢。

我猜测，过渡层隐藏的时候gif也是在运动的，所以才会出现这个问题，知道了原因就想办法解决吧。

一开始gif是做为过渡层（一个 div 标签）的背景的，我就想切换的时候改变 background 的值，发现无法解决。

去掉背景，过渡层里面嵌套个 img 标签，也不行。

用jq的 append() 函数动态插入也不行。

最后搜索了下，发现有个点击播放gif的例子，那个例子有点复杂，粗略看了下，发现它用了自定义属性，我就试了下，结果成功了！！

想了下，每次用 atr() 赋值应该是重新加载了遍，看了下network，果然是这样。

修改前代码：

    /*转场*/
    var showTransit = function(callback) {
        $wrap.find('.transit').show();
        setTimeout(function() {
            $wrap.find('.transit').hide();
            callback();
        }, 900);
    };
                    

    .transit{
        background: url(../images/transit.gif) no-repeat center center;
    }
                    

修改后代码：

    /*转场*/
    var showTransit = function(callback) {
        $wrap.find('.transit').find('img').attr('src', $('.transit img').data('src')).end().show();
        setTimeout(function() {
            $wrap.find('.transit').find('img').attr('src', '').end().hide();
            callback();
        }, 900);
    };
                    

注意：不能使用图片预加载，图片预加载过上面那方法就会有一定几率会失效。

点击gif图片开始播放 DEMO

整体效果，扫下下面的二维码