网页换肤中，会遇到闪烁的问题。就是当点击切换按钮的时候，更换颜色或者图片会闪烁一下。或者使用 Cookie 记录之后，用户使用了非默认的皮肤，也会闪烁一下，先出现默认的样式然后再闪烁切换成用户自己选择的样式。
这种影响用户体验的现象肯定要彻底消灭，但是一直没有找到完美的解决方法。因为浏览器默认的是优先渲染 CSS 之后再加载 JS，特别是使用 Cookie 记录的皮肤，先渲染现有的 CSS 之后，JS 才能读取然后切换到皮肤。原理是这样的，跟客户协商之后，客户给出了一个“无闪烁”的换肤效果示例，是 MG12 很早的一款主题。同样的 Cookie 记录等，但是他的作品确实没有闪烁情况。
于是我就查看了他的 JS 代码，没有发现特殊之处，后来才想明白，这种闪烁问题，在图片比较多的网页中效果尤其明显，因为切换的 CSS 需要加载图片需要更多时间。而 MG12 那款主题中，切换的 CSS 文件只是改变了几个 background 颜色，加载速度快到你眼球反应不过来就造成了不闪烁的假象。
不完美解决方案也是有的，点击切换按钮之后的闪烁情况，也是因为要加载图片等，那么我们可以在访问网页的时候，使用预加载技术将其他皮肤图片预加载或者使用 CSS Sprite 技术做成一张大图片。
至于 Cookie 记录闪烁的问题，这是浏览器渲染的硬伤，只能尽量减少换肤需要改变的地方，尽量压缩图片减小体积。然后优先加载没有任何皮肤的基础样式，之后使用 JS 加载默认样式或者读取 Cookie 获取的皮肤选项。这样处理，访问网页的时候会先显示白色或者无颜色，之后直接切换成之前选择的皮肤的颜色，而不会从默认的颜色闪烁变成另一种颜色从而提升一定的用户体验。
您可能感兴趣的文章: