Home / Blog / bugs

GIF图片播放问题

Author: Vic.Wang 2016/05/30 Tags:gifbugplay播放gif播放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

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

法国欧洲杯