When a page has many gif images, you’d prefer to play them upon certain user action: over the image, click on the picture or some button, slider scroll, etc. There are several possible options on how to implement this. Let’s take a look at the most popular ones:
1. Image substitution.
The idea here is to promptly substitute a static image with the animated gif upon some event. Let’s assume we use image click event.
Here’s the code:
Same thing for the “hover” event:
Note that in our example we use jQuery 1.9.1.
2. Using a third-party library.
A quick and simple way to animate a gif upon some event is to use an appropriate library. I personally prefer freezeframe.js https://github.com/ctrl-freaks/freezeframe.js.
There’s a detailed instruction with samples available there.
