gif动画可控制播放

问题描述：

翻页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调整为不循环。

参考资料：
https://stackoverflow.com/questions/3191922/restart-an-animated-gif-from-javascript-without-reloading-the-image