一、背景

开发一个答题页面，有答题页和结果页，两个页面分别是两张不同的背景图。用户在答题页答题结束后，答题页切换到结果页。在切换的过程中，背景图闪了一下，用户体验比较差。

切换前： 切换后：

二、原因

背景图闪的根本原因是图片太大，图片闪的时间就是图片加载的时间。所以解决思路是：1、压缩图片；2、减少图片加载时间。

三、解决

1、压缩图片

首先要减小图片的大小，可以在这个网站上对图片进行压缩：tinypng.com/ ，

压缩前：

压缩后：

几乎压缩到了原来的1/6。

但是发现压缩完图片后还是会闪，继续优化。

2、图片加载优化

方法1、用js方法实现图片预加载

useEffect(() => {
    preCoverLoadImage()
}, [])

// 预加载图片
const preCoverLoadImage = () => {
    setTimeout(() => {
        const coverBasemap = new Image()
        coverBasemap.src = 'https://img.png'
    }, 300);
}

首先定义一个预加载的函数，在页面首次渲染时预加载所有的背景图，当切换背景图时，将会从缓存中读取图片，不会有额外的加载图片的时间。300毫秒的超时是为了防止脚本挂起，影响正常页面出现功能问题。页面闪的问题解决！

方法2、img标签

<img src="https://img.jpg" style={{display: none}} />

img标签会在html渲染到的时候，解析到img的src时，浏览器会立即开启一个线程去请求该资源。img标签通过css样式设置为隐藏，不会对页面的展示有影响。同样更换背景图的时候，会从缓存中读取。但是这种方式有局限性，Opera浏览器不生效。更所以推荐方法1。