gif在html里为何会自动停止,CSS或JS实现gif动态图片的停止与播放

一、屋外：寒风吹，雪花飘；屋内：空调吹，代码飘

上午出去买菜，正好下雨了，还夹杂着冰珠子。鄙人大意，穿的是一件帅气但单薄的黄色大衣，立马冻成了中华田园犬。原本计划去钓鱼的，科科，作罢，上午在家看CCTV5 骑士队vs鹈鹕队，下午补动漫码代码做文章，好生惬意。

对于习惯性刷微博的我，总时不时会看到类似下面的游戏：

测测你和小白(白百何)有哪些共同点，戳开动图，最先看清的词是什么？ie浏览器的同学可以按esc键(或截屏)，据说在哪个词暂停，哪个词就是你哦！

OK, 这里出现一个浏览器特性，就是通过ESC快捷键，暂停gif的播放。据说FireFox浏览器以前也有，后来被干掉了，根据@紫云妃的说法是：

是这样的,Firefox原来的表现是:在页面load事件完成,同时x按钮变成刷新按钮之后,esc仍然有几个作用,中断当前正在发送的ajax,websocket,停止gif,apng动画的播放.但这些功能太小众了,影响了普通用户的使用,可能不小心按了esc,结果ajax断了,网页出错了.所以Firefox20修改成:网页加载完成后,esc键完全失效.

然而，这种隐晦的但似乎会影响正常功能的小技巧显然是无法实现真正意义上的gif动态图片的停止与播放的。一是兼容性，二是功能性，三是移动端没有ESC键。

所以，如果我们遇到需要可以随时随地停止gif动态图片播放的需求的时候，就需要寻找其他的出路。好，寒冬里的暖身结束，开始进入正题~~

二、gif图片自己可控前提下的方法一：多img资源控制处理