Steve Faulkner 有一个巧妙的想法，请点击此处查看。您可以显示一个（动画）GIF，并在其顶部覆盖一个暂停/播放按钮——实际上是一个 <details>/<summary> 元素。切换时，内部的（非动画）JPG 会覆盖 GIF，有效地“暂停”它。
Adrian Roselli 称之为“快速而简陋”的 WCAG 成功标准 2.2.2 暂停、停止、隐藏的方法。
我修改了它，交换了所有图像，使其首先显示 JPG，并在图像上添加了 loading="lazy"。它似乎可以有效地不加载 GIF，直到您明确按下播放，因此这也是一种选择。
这个库看起来很有希望可以暂停/播放 GIF：https://github.com/buzzfeed/libgif-js
相关：https://christianheilmann.com/2020/07/16/a-css-only-click-to-animate-gif-solution/
这似乎是错误的做法。在我看来，使用视频元素和 MP3 文件之类的东西会更有效。
这似乎也没有真正有效地暂停 GIF。这更像是停止 GIF。当您取消暂停时，您会注意到它根本不在您预期的地方。这似乎比将 GIF 转换为视频或不允许使用 GIF 的用户体验差得多。
不错。另一种选择是根据检测到的“减少运动”来决定是使用静态图像还是动画图像 :)
好吧，它实际上并不是暂停。gif 会在后台继续播放，暂停的帧并非用户暂停的位置。对于非常短的 gif 来说，它可以更好地工作，但对于较长的 gif 来说可能会令人困惑。
gif 的用途是循环图像。大多数（如果不是全部）用户都理解这一点。
停止 gif（在这种情况下为暂停）并从该确切点开始，这与非开发人员用户无关。它是循环的。它将在几秒钟内返回到该点。
大多数 gif 的持续时间都很短。建议将持续时间超过 5 秒的 gif 替换为视频。本文提供的解决方案在使用短时 gif 的适当情况下是一个不错的选择。
浏览器处理可访问性和功能，这几乎总是比非 HTML 或 Javascript 解决方案更好。
我认为此解决方案应该添加到开发人员的工具集中，以供需要时使用。毫无根据地批评它完全没用（特别是由于您没有首先想到它）是轻率和狭隘的。
这在我的 Chrome 上不起作用，只需将脚本翻转为默认静态（关闭）并在首选减少运动检查后添加 open 属性，就可以获得更好的结果。https://codepen.io/phillipkent/pen/yLJwKNm
哦，等等——我仍然更喜欢我的方法，但我在这个笔中遇到的真正问题是 JS 第 1 行中多余的“)” ♂️