GIF图片播放问题

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

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

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

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

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

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

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

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

修改前代码：

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

<div class="transit hide"></div>

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

<div class="transit hide">
    <img class="page" data-src="images/transit.gif" alt="" />
</div>

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

点击gif图片开始播放 DEMO