Gif动图暂停和播放插件jquery.gif.js

使用方法：

引入CSS样式文件

<link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link rel='stylesheet' id='jquery-gif-css'  href='css/jquery.gif.css' type='text/css' media='all' />

引入jQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.gif.min.js"></script>

初始化、配置插件

在页面DOM元素加载完毕之后，可以通过gif()方法来初始化该插件。下面的代码对页面中所有class 为.gif的图片都进行初始化。

$( document ).ready(function() {
    $('.gif').each(function() {
      $(this).gif();
    });
  });

HTML结构

使用<img>元素来制作该效果。其中src属性指向一张静态的预览图片，data-gif属性指向GIF图片。

<img src="img/1.jpg" alt="GIF Loader" data-gif="img/1.gif" class="gif">
<img src="img/2.jpg" alt="GIF Loader" data-gif="img/2.gif" class="gif">