GIFアニメ画像を停止して読み込ませ、クリックで再生させる2つの方法

GIFアニメ画像をそのまま読み込ませると、ページが重かったりします。訪問者的にもGIFアニメは最初から見たいと思います。あまりいい方法ではないですが、2つの方法をご紹介します。GIFアニメの画像は、dribbbleから利用させていただきました。

Javascriptを利用する

停止している画像を最初に表示させ、クリックしたらGIFアニメ画像に置き換えるという方法です。

<img src="image_off.gif" onclick="this.src='image.gif'" alt="">

2つの画像を用意しなければいけないという手間が発生します。この方法を使うなら、再生アイコンは別に表示してもっと詳細なJavascriptを記述したりするといいでしょう。

Giffferライブラリを利用する

jQueryプラグイン感覚で利用できるライブラリが公開されています。動画のようにクリックしたら、GIFアニメが再生され、もう一度クリックすると停止します。サンプルはこちら。

使い方は簡単です。GitHubで公開されているソースをダウンロード。ダウンロードして解凍すると、buildフォルダに”gifffer.min.js“がありますのでこのファイルを読み込ませます。そして、処理を実行させる。

<script type="text/javascript" src="gifffer.min.js"></script>
<script type="text/javascript">
window.onload = function() {
  Gifffer();
}
</script>

そして、imgタグにはsrcの代わりにdata-giffferを利用します。それだけで、再生アイコンが表示され、クリックで停止/再生が可能になります。

<img data-gifffer="image.gif">

詳細なしくみは不明ですが、描画にHTML5のcanvas要素を利用しています。ですので、一部ブラウザには対応していないかもしれません。