记录一些优化的方案，给相同问题的小伙伴参考一下。最近利用外部css文件实现了背景切换的目的，然而发现了一个小问题。每次清除缓存打开网站，需要重新加载图片，图片和图片切换之间会出现大概零点几秒的白屏。视觉上就像闪屏，等待所有图片加载完成再进行循环切换则没有该问题，猜测是网络环境影响。但尝试了不同网络、将图片压缩至500KB还是无法解决,最后完善了一下切换逻辑，效果感觉还行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#web_bg {

    /*background-image:初始图片路径;  //可有可无，效果无太大影响*/
     animation: gradientFade 60s infinite;  /*一次切换时间设置 */
}

/*如果要增删背景图片务必修改.css文件和.js文件*/
@keyframes gradientFade {      
    0%, 100% {background-image:图片路径1；}
    25% { background-image: 图片路径2;}
    50% { background-image: 图片路径3;}
    75% { background-image: 图片路径4;}
}

以上由CSS文件加载并且进行切换，加载速度比较慢，因此在JavaScript中调用函数进行图片预加载，等待切换动画进行时加载已经完成。新建一个.js格式文件，编写以下代码： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = function() {
    preloadImages();
};

function preloadImages() {
    const images = [
        '图片路径1',
        '图片路径2',
        '图片路径3',
        '图片路径4'
    ];
    for (const imageSrc of images) {
        const img = new Image();
        img.src = imageSrc;
    }
}

最后不要忘了在html代码中加上外部引用确保能正常调用： 
1
2
3

- <script src="/js/cover.js"></script>

打开网站测试发现预加载的背景图片比没有预加载的封面显示还快，闪屏问题解决。