解决pc端鼠标浮上二态闪烁问题

问题描述

最近遇到一个pc端的小bug,一个按钮的hover二态是一个序列帧动画，页面刷新后鼠标浮到按钮上二态的动画有一个明显的闪烁，这让我的体验就很不好了，更别说用户了。之前也遇到过二态闪烁的情况，但是那个二态是一张静态图，直接用雪碧图合并一下就OK了，但是这次是一个序列帧动画呀，没办法合并，怎么办呢？找闪烁的根本原因呗

根本原因

hover的时候图片要加载显示到页面上，在加载的时候就会闪烁一下，同事建议将二态序列帧图片预加载一下，但是之前试过，行不通。
就像老大说的：“我相信任何问题都会有解决办法的”
我也信。

终极办法

让二态图片在页面渲染的时候就直接加载到页面上，hover的时候就不用再次将二态序列帧渲染到页面上。
设置两个span标签，一个放一态图片，一个放二态，hover的时候通过opacity来控制一二态的显示与否。这个非常可行。完美！