GIF Player Stack
Loads animated GIF images only when the user demands them.
Description
Loads animated Gif images only on demand.
You may be aware, you can now add animated GIF images directly to your pages like any other image. But animated GIF's that load automatically at page load time have a few downsides. They are much larger than regular images so slow the page load time down dramatically. Also having a lot of GIF's animating at the same time after the page has loaded can be very distracting for your visitor.
Huge page load speed boost
Animated GIF images are much larger than a regular image. Loading them all at page load time dramatically increases the overall page load speed.
Automatically generated poster image
When you add an animated GIF to your page, the stack will automatically generate a poster image, to be displayed until the user wants to see the animation.
NEW: 3 Modes
On Demand: None of the animated GIF images are ever loaded at page load time.
Preload: The GIF will be preloaded and cached once all other page content has finished loading, so now plays instantly when clicked.
Autoplay: The GIF will be preloaded and cached once all other page content has finished loading, and instantly start playing
Familiar user experience.
We designed a familiar GIF mark that appears on the poster image to indicate to your visitor that they can click to see an animated GIF. The mark is fully animated to indicate when the animation is loading.
Demo
You can see live examples of the stack in action below.
Auto play when GIF's load in view.
Note: the stack in this demo has it's mode set to "Autoplay" Why is this different from just dropping a GIF into my page? Because it will not attempt to load the GIF until all your other page content has finished loading, thus vastly improving page load speed.
Auto stop when GIF's leave the view.
Note: the stack in this demo has it's mode set to "Preloaded" If the user starts playing a GIF, and then scrolls away without stopping the GIF first, then as the GIF leaves the users view, it will be automatically stopped to save browser resources.(does not apply to autoplay mode)
Only ever load once.
Note: the stack in this demo has it's mode set to "On Demand" When one of your GIF's is loaded it is cached. This means the next time the user tries to load the same GIF it will load instantly. This can persist between visits to your page. The stack will detect if the user has cached the GIF, and completely skip the loading phase when appropriate.
Loading animations.
Note: the stack in this demo has it's mode set to "On Demand" When the user is interested in one of your GIF animations, they click to load and start playing. The GIF indicator will animate to indicate the GIF is loading.
The GIF's used in the demo are examples of cinemagraphs by cinemagraphs.com
User Settings
A comprehensive overview of this stacks user settings.
Choose one of the three modes for the stack:
- On Demand: None of the animated GIF images are ever loaded at page load time.
- Preload: The GIF will be preloaded and cached once all other page content has finished loading, so now plays instantly when clicked.
- Autoplay: The GIF will be preloaded and cached once all other page content has finished loading, and instantly start playing
Add your animated Gif image here.
Last modified %(last_mod)%