Late load a GIF animation and add a pause control to help meet WCAG 2 level AA
Switch branches/tags
Nothing to show
Clone or download
Latest commit 36158dc Sep 10, 2016
Permalink
Failed to load latest commit information.
css Image updated Sep 10, 2016
img Image updated Sep 10, 2016
js IE9 friendly version added Sep 9, 2016
README.md MD updated Sep 10, 2016
index.html Image updated Sep 10, 2016

README.md

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"
     data-gif="img/animated.gif"
     alt="Alt text description">

Add an SVG definition for the play and pause buttons:

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

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