10年网站建设优化实战经验
18217721733

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思路去实现的,首次切换也不会出现闪烁。

多Tab动态切换背景