传说中的 " 图片序列帧技术 "

一. 实现原理

图片序列帧技术的原理其实非常简单，就是先将 Gif 图片找美工拆成一堆的 Png 或者 Jpg 格式的图片。然后在前端写一个定时器，每隔一段时间加载一张图片就可以了。这里还有一个需要注意的地方，就是我们要对每一次加载的图片在前端进行缓存，如果不缓存，在一些加载比较慢的电脑上就会出先闪一下的情况。

二. 演示以及说明

• 一般来说在 FireFox、Chrome浏览器中直接使用 

  <img src="xxx.gif">

  就可以实现动图的效果，但是在 IE 内核的浏览器会出现直接使用 Gif 图片不动的问题

• 下面是一个直接使用 <img> 标签的实现动图效果的例子（方便对比）

  <img src="https://files.cnblogs.com/files/Jeffrey-Chou/bzhan233niang.gif" />

  效果图：

• 接着下面是一个使用图片序列化播放效果的例子

• 使用这个方法有三个好处：

1.  不会出现闪烁的问题；
2.  不出在 IE 下出现动图卡住不动的 Bug ；
3.  在 C# 的 Winform 的 Webbrowser 中不会造成由于加载 Gif 图片导致的内存溢出或者泄漏的问题；

   //html代码
   <img id="imgDiv" src="Images/png/bzhan233niang1.png" width="420" height="480">
   <input type="button" value="取消图片播放" onclick="CancelPlay();"/>
   
   //js代码
   <script type="text/javascript">
       //定时器句柄
       var timer = null;
       //当前图片的序号
       var imageIndex = 1;
       window.onload = function () {
           var imgDiv = document.getElementById("imgDiv");
           if (imgDiv) {            
               //设定计时器
               timer = window.setInterval(function () {
                   //缓冲图片
                   var bufferImage = new Image();
                   bufferImage.src = "Images/png/bzhan233niang" + imageIndex + ".png";
                   imgDiv.src = bufferImage.src;
                   //序号+1
                   imageIndex++;
                   //如果序号到达最大，那么重置
                   if (imageIndex > 20) {
                       imageIndex = 1;
                   }
               }, 50);
           }
       };
       function CancelPlay() {
           if (timer != null) {
               window.clearInterval(timer);
           }
       };
   </script>

•  最后，要注意如下几点：

1. 由于博客园的限制，我上面只能使用 Bmp 格式的文件，而且只传了20张，正常状态下一般使用 Png 格式的（文件大小会小一点） ；
2. 图片的后缀名称必须和图片真正的格式相互匹配，否则在 IE 10 (也可能是在 IE 9 下,忘记了...)下会出现加载不出来的问题（显示为 " X ")；
3.  这种方式不能加载很多大的图片，只能加载一些简单的小图片动画，加载太多会导致内存溢出；
4.  需要找美工把 Gif 制作成 Png (大小每一张要都和 Gif 原图大小相同)，最好不要使用 Jpg ( Jpeg )；
5.  img 中的 src 必须要先初始化，不然在文档加载慢的时候IE下会有一个加载失败的图标；

• 示例下载

下载地址