Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
img
 
 
js
 
 
 
 
 
 

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.

About

Late load a GIF animation and add a pause control to help meet WCAG 2 level AA

Resources

Releases

No releases published

Packages

No packages published