控制gif图片的单次播放

控制gif图片的单次播放

业务需求：实现用鼠标触发gif图片的单次播放，播放后停留在gif的最后一帧上面，目的是为了招商引资，打广告，赚运行的服务器费用。

一、问题

正常gif图片在浏览器中不加任何控制的话，会在页面加载完成后，自动播放，不受控制。

二、解放方案

1、将每个gif图片的第一帧图像保存起来，作为浏览器加载完成后的显示图片，事先让UI设计师设计每个gif图片时，故意保留了第一帧的图片，所以直接通过 <img> 标签就可以实现。
<img src="img/test.jpg" id="test">

2、通过 JavaScript 获取鼠标移动到GIF上时的当前 <img> 标签的对象，通过 getElementById（） 方法即可获取到指定ID的第一个对象的引用。然后通过替换 <img> 的src的路径即可完成。
var test= ElementById('test');
var flag= true;
useover = function () {
if(flag== true){
test.src = 'imgs/test.gif';
}
flag= false;
}