# 动态 GIF：停止播放！

**URL:** https://meta.discourse.org/t/animated-gifs-make-it-stop/187607
**Category:** Feature
**Created:** [2021年四月21日 11:30 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607 "2021-04-21T11:30:24Z")
**Posts on this page:** 1
**Showing post:** 16

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2021年四月26日 19:46 UTC](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607/16 "2021-04-26T19:46:51Z")

</div>

> [@sam](#):
>
> 我认为（虽然我不确定）这仅在 GIF 完全加载后才生效。有些动态 GIF 可能需要一段时间才能加载完毕。

暂停功能可以正常工作，但在 GIF 完全加载之前，画布无法读取/绘制第一帧。我认为我们无法彻底修复这个问题，因此我为 `canvas` 元素添加了一种微妙的背景色，显示效果如下：

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/e/7e5ef6a0a1b0a8d958d182d4b63e4ee38b856bc0.png)

我还添加了播放/暂停图标以及一些其他改进。

> <https://github.com/discourse/discourse/pull/12839>
>
> \- 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.

---

_[View the full topic](https://meta.discourse.org/t/animated-gifs-make-it-stop/187607)._