GIF图片播放问题
Author: Vic.Wang 2016/05/30
恭喜自己又踩到了个坑,说说怎么踩到这个坑的吧。
这几天在弄欧洲杯的一个公众号吸粉页面,其中页面与页面之间切换,有个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); };
注意:不能使用图片预加载,图片预加载过上面那方法就会有一定几率会失效。
整体效果,扫下下面的二维码
本文地址:http://blog.mingsixue.com/bugs/HTML-gif-play.html
文章若需转载,请附上原文链接,谢谢配合。^_^