webstudioWhitePallet

WEBページを見ていると、稀にアニメーションGIF画像を沢山貼っているサイトがあります。(このブログもそうですが)
一見、動きがあって派手に感じますが、閲覧者にとっては一定のリズムでチカつくために不快に感じさせる場合も多いと思います。
これを解決する手段として、代替えの静止画像をクリックさせGIFに入れ替えて動作させる方法がポピュラーかと思うのですが、GIF画像がアップされる度に静止画像も作るのはあまりスマートな方法と思えなかったため、Javascript(jQuery)で制御できないかと調べてみました。

• gifffer
• gifplayer

この辺りのプラグインを参考に簡易的なJSを作成してみました。
HTML <div class="gifs"> <img src="1.gif" /> <img src="2.gif" /> </div>
JS stop_gif(".gifs img"); 止めたいGIF画像のセレクタを指定し、imgを別要素に入れ替えてcanvasで静止画を表示させます。 DOM <div class="gifs"> <object class="stop_gif"><canvas rel="1.gif"></canvas></object> <object class="stop_gif"><canvas rel="2.gif"></canvas></object> </div> DEMO:GIFを静止させクリックで動作 ちなみにiPhoneの場合、loadのタイミングにズレがあるらしいので
DEMOでは該当コンテンツ部分を再ロードさせています。