一、背景

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

切换前:

怎么处理替换底图时的闪耀问题
切换后:
怎么处理替换底图时的闪耀问题

二、原因

背景图闪的根本原因是图片太大,图片闪的时刻就是图片加载的时刻。所以处理思路是:1、紧缩图片;2、削减图片加载时刻。

三、处理

1、紧缩图片

首要要减小图片的大小,能够在这个网站上对图片进行紧缩:tinypng.com/ ,

怎么处理替换底图时的闪耀问题

紧缩前:

怎么处理替换底图时的闪耀问题

紧缩后:

怎么处理替换底图时的闪耀问题

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

可是发现紧缩完图片后还是会闪,持续优化

2、图片加载优化

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

useEffect(() => {
    preCoverLoadImage()
}, [])
// 预加载图片
const preCoverLoadImage = () => {
    setTimeout(() => {
        const coverBasemap = new Image()
        coverBasemap.src = ''
    }, 300);
}

首要定义一个预加载的函数,在页面首次烘托时预加载一切的背景图,当切换背景图时,将会从缓存中读取图片,不会有额外的加载图片的时刻。300毫秒的超时是为了防止脚本挂起,影响正常页面出现功能问题。页面闪的问题处理!

办法2、img标签

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

img标签会在html烘托到的时分,解析到img的src时,浏览器会立即开启一个线程去恳求该资源。img标签经过css样式设置为躲藏,不会对页面的展示有影响。相同替换背景图的时分,会从缓存中读取。可是这种方法有局限性,Opera浏览器不收效。更所以引荐办法1。