js动态切换css背景，首次切换时出现空白闪烁

上海知九信息 CSS web前端图片优化网站优化 2020-08-23

在多Tab切换、背景轮播等场景下，css背景首次切换出现空白闪烁，非首次就正常了，主要是因为图片加载造成的短暂白屏。

如果我们能让图片预先加载，切换时就不会出现这种空白闪烁的情况了。具体解决方法如下：

1、将所有图片合并为一张雪碧图，改变background-position的值来滑动切换；

2、给默认Tab设置多背景图，如：background-image:url("bg-默认.jpg"),url("bg-2.jpg")url("bg-3.jpg");，多个url之间用,隔开，默认背景图放在第一位。这样也实现了bg-2.jpg和bg-3.jpg的预加载，之后再动态切换时就不会出现空白闪烁了

如下图，就是使用方法2思路去实现的，首次切换也不会出现闪烁。