On-Demand Animated GIF Player
Play animated GIFs on-demand with this GIF player. No JavaScript dependencies. Initial loading of a GIF is delayed until the user starts playback manually.
Works in modern browsers and IE8+ (no loading spinner or transparent overlay in IE8).
Please view the source of this page for HTML markup, CSS and JS.
Animated GIF courtesy of Stinkdigital's "Share a Coke" project
Requires a static placeholder image and an animated GIF image, saved to the same location and called the same thing (e.g. 'my-animation.png' and 'my-animation.gif').
The static image used in this demo is a '.png'. You can use a '.jpg' instead, but remember to update the line in the 'removeGif();' JavaScript function too.
Note that cache-busting is in effect in the demo so that you can see the GIF loading each time 'play' is triggered. For improved performance, remember to delete/ uncomment the lines indicated in the 'loadGif();' JavaScript function on your live site (so that GIF playback can begin immediately after first play).
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.