Stop autoplaying your Gifs

Blog/JavaScript · 2014-06-19 · gifffer image library page gifffer min js animated gif

This blog has 460 posts. In some of them, I need to show video clips demonstrating some feature or browser behaviour. I found that it was much better to do that in an animated Gif. However, they play automatically which is kinda annoying. Imagine that we have ten Gifs on the page and while you are reading they all blink or show moving content. It's like having a page full with banners.

The solution

I ended up with fairly simple solution. To be more accurate - 1.5K JavaScript library called Gifffer. It has only one simple task. It should replace my tag with a stop/play controllable version of the animated Gif. Here is how it looks:

The workaround was inspired by this answer at StackOverflow. Gifffer waits till the image is fully loaded. It makes a screenshot of one of the first frames and replaces the original tag with a

element. When the user clicks on it the animation starts, and if he clicks again it stops.

Usage

Just include the library in your page:

<script type="text/javascript" src="gifffer.min.js"></script>

Instead of setting src attribute on your image use src.

<img src="image.gif" />

At the end, call Gifffer() whenever you want. For example:

window.onload = function() {
    Gifffer();
}

Download

The library is available at GitHub here. The file that you need is gifffer.min.js.