如何解决更换底图时的闪烁问题

相关文章推荐

坏坏的板栗 · php 图片处理之图片转为 base64 ...· 3 年前 ·

玩足球的大蒜 · 机器视觉海康工业相机SDK参数设置获取 - 知乎· 3 年前 ·

路过的小熊猫 · 为什么说 Wasm 是 Web ...· 3 年前 ·

失恋的杯子 · 使用Selenium+CefSharp撸一个 ...· 3 年前 ·

活泼的铁链 · 2022先正达集团中国 ...· 3 年前 ·

setTimeout (() => { const coverBasemap = new Image () coverBasemap .src = 'https://img.png ' }, 300);

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

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

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

推荐文章

坏坏的板栗 · php 图片处理之图片转为 base64 格式上传 - 掘金

3 年前

玩足球的大蒜 · 机器视觉海康工业相机SDK参数设置获取 - 知乎

3 年前

路过的小熊猫 · 为什么说 Wasm 是 Web 的未来？-wasm是前端还是后端

3 年前

失恋的杯子 · 使用Selenium+CefSharp撸一个BOSS自动打招呼和回复功能（一） - 知乎

3 年前

活泼的铁链 · 2022先正达集团中国 “MAP杯”数智农业大赛收官 - 中国日报网

3 年前