js解决切换背景图片，发生闪屏问题

原因

问题出现在本站首页，切换lol人物台词，会重新获取背景图片并切换。

而下一张图片加载完成之前，会将原背景色暴露出来，从而形成所谓的闪屏

解决

先创建一个Image实例，进行预加载，完成后再挂载到背景上

代码语言：javascript复制

1 const img = new Image();
2       img.src = `${globalConfig.remoteStaticUrl}/image/${data[0].picture}`;
3       img.onload = () => {
4       const imgEl = document.querySelector(".SentenceContent");
5
6       //@ts-ignore
7       imgEl.style.backgroundImage = `url(${globalConfig.remoteStaticUrl}/image/${data[0].picture})`;
8       }

image

0 人点赞