JS切换背景图片时的“白色闪屏”问题

最新推荐文章于 2023-07-28 10:34:04 发布

原创最新推荐文章于 2023-07-28 10:34:04 发布 · 9.7k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#js #background #闪屏 #白屏

前端 - 学习一下下专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种解决网页背景图切换时出现闪屏问题的方法。通过预加载图片，确保新背景图完全加载后再进行切换，有效避免了视觉上的不连贯性。

before:

document.body.style.backgroundImage = "url(xxx.jpg)";

after:

// 修复切换背景图时出现的“白色闪屏”现象
let img = new Image();
img.src = "xxx.jpg";
// 确定图片加载完成后再进行背景图片切换
img.onload = function () {
	document.body.style.backgroundImage = "url(" + img.src + ")";
}