Skip to content
Late load a GIF animation and add a pause control to help meet WCAG 2 level AA
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
js
README.md
index.html

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.