Late load a GIF animation and add a pause control to help meet WCAG 2 level AA
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Latest commit 36158dc Sep 10, 2016 @2kool2 MD updated
Failed to load latest commit information.
img Image updated Sep 10, 2016
js IE9 friendly version added Sep 9, 2016

Late-load animated GIFs and add a pause button

Provides a pause button to meet WCAG 2 level AA (supply controls for animations which last longer than 5 seconds).

CodePen demo: Late-load an animated gif and provide a pause button

Super small script: 543 bytes gzipped.

How it works

Initially loads a static image (.jpg) then once the page has fully loaded, swaps it out for the (much) larger animated gif.

A pause control is added which flips between the static image and the animation to meet WCAG 2 level AA. Which states a pause control is a requirement on animations which last longer than 5 seconds.

The animated gif is preloaded into memory, then displayed, preventing flashes of white occuring.

The SVGs used for control buttons are defined in the HTML.

To use

Include a link to the script:

<script src="js/gif-late-load.1.0.min.js"></script>

Add data attributes to the image(s):

<img src="img/static.jpg"
     alt="Alt text description">

Add an SVG definition for the play and pause buttons:

<svg style="display:none">
    <symbol viewBox="0 0 34 34" id="icon-play">
      <path d="M25 17.2l-14 7v-14l14 7z"></path>
    <symbol viewBox="0 0 34 34" id="icon-pause">
      <path d="M20 11h2v12h-2V11zm-8 0h2v12h-2V11z"></path>

Tested Mac and PC: IE9+, Chrome, Safari, Firefox.