If you have a Media Sharing site to loading multiple GIFs on a page, this will make your users feel uncomfortable. Today I will bring to you solutions to only have them animate when a user performs a actions.
Below is 2 options to play and stop animated gifs with jQuery for you:
1. Use gifplayer created by Rubén Torres:
With gifplayer jquery plugin can play and stop animated gifs similar to 9gag.
Add libraries of gifplayer, jQuery on your website:
<link rel="stylesheet" href="css/gifplayer.css"> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/jquery.gifplayer.js"></script>
In IMG tag add a static version of the gif file to “src” atrribute when add a “data-gif” attribute with the path to the animated gif or simply have an image with the same same and the .gif extension in the same folder of the “preview” image.
<img id="banana" src="photo/gif01.jpg" data-gif="photo/gif01-animated.gif" class="gifs"/> <img id="cheetah" src="photo/gif02.jpg" class="gifs"/>
2. Use Embedly jQuery
Embedly Display with “animate=false” to only animate the GIF when the user hovers mouse on the image.
View Demo and Download