问题描述:
翻页H5,每次翻页进入某页面时,需要播放页面中的gif动画。gif动画不是循环的,只需播放一遍。浏览器却只会在第一次进入翻页时播放gif动画,第二次进入时停留在最后一帧。
处理方案:
每次进入某个页面时,删除gif元素并添加img元素,等待10毫秒后为img.src赋值。
// 预加载图片 相比于让图片url带随机数的方案,不需要每次加载。对于动辄上M的gif,体验优化明显。
var image = new Image();
image.src = "path";
// 删除并重新创建 如果不删除元素,只让src='', 然后再等10毫秒赋值,Chrome实测并不能让gif重新动起来
$('#mygif').remove();
var a = $('<img id="mygif" />').insertAfter($('#gifBox'));
setTimeout(function () { // 实测如果不延时,gif 不会动。
a.attr('src', image.src);
}, 10);
如果gif 本身是循环的,可以用photoshop调整为不循环。