jQuery Plugin To Play Animated GIF On Hover - gifPlayer
File Size: | 1.06 MB |
---|---|
Views Total: | 4481 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

gifPlayer is a jQuery plugin that replaces an animated GIF with a static image and then play it on mouse hover. Useful to save the bandwidth and improve the page load speed. The plugin uses javascript to swap between
How to use it:
1. Add the animated and static GIFs into an img
tag like this:
<img class="playgif" data-swap="animated.gif" src="static.gif">
2. Load the necessary jQuery JavaScript library into your html page.
<script src="//code.jquery.com/jquery-1.12.2.min.js"></script>
3. The jQuery script to swap between data-swap
and src
attributes when mouse hovers in/out.
var imageSwap = function () { var $this = $(this); var newSource = $this.data('swap'); $this.data('swap', $this.attr('src')); $this.attr('src', newSource); } $(function () { $('img.playgif').hover(imageSwap, imageSwap); });
This awesome jQuery plugin is developed by vtisnado. For more Advanced Usages, please check the demo page or visit the official website.