如何解决更换底图时的闪烁问题 |
您所在的位置:网站首页 › html图片闪烁 › 如何解决更换底图时的闪烁问题 |
一、背景
开发一个答题页面,有答题页和结果页,两个页面分别是两张不同的背景图。用户在答题页答题结束后,答题页切换到结果页。在切换的过程中,背景图闪了一下,用户体验比较差。 切换前:
背景图闪的根本原因是图片太大,图片闪的时间就是图片加载的时间。所以解决思路是: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标签会在html渲染到的时候,解析到img的src时,浏览器会立即开启一个线程去请求该资源。img标签通过css样式设置为隐藏,不会对页面的展示有影响。同样更换背景图的时候,会从缓存中读取。但是这种方式有局限性,Opera浏览器不生效。更所以推荐方法1。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |