pmusaraj
April 26, 2021, 7:46pm
16
The pause action works, but the canvas can’t read/draw the first frame until the GIF has fully loaded. I don’t think we can properly fix this, so I added a subtle background color to the canvas element, which will display like this:
I also added play/pause icons and a few other improvements.
discourse:master ← discourse:pause-gifs-improvements
opened 07:30PM - 26 Apr 21 UTC
- Adds pause/play icons in bottom/right corner
- Pauses animated images automat… ically on blur
- Resumes animated images when window focus returns
- Pauses on load when OS has `prefers-reduced-motion` enabled
- Adds subtle background color to `canvas` element, so that in slow connections where the full GIF loads slowly, pausing the animation will show something in stead of blank space
The icons are shown as follows:
Pause icon is shown for non-touch devices on hover.
Play icon is shown on all devices when animation is paused.
10 Likes
