解决js控制元素背景图片切换时的闪屏问题
作者：互联网
解决js控制元素背景图片切换时的闪屏问题
看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
width: 100vw;
height: 100vh;
background-position: center;
background-size: cover;
}
.bg1 {
background-image: url('./img/bg1.png');
}
.bg2 {
background-image: url('./img/bg2.png');
}
</style>
</head>
<body>
<div class="div1 bg1"></div>
<script>
window.onload = () => {
const div1 = document.querySelector('.div1');
const timer = setInterval( () => {
if(div1.classList.contains('bg1')) {
div1.classList.replace('bg1', 'bg2');
} else {
div1.classList.replace('bg2', 'bg1');
}
}, 1000);
}
</script>
</body>
</html>
我想实现的效果就是div1的背景图片来回切换，时间间隔为1s。
效果实现了，但第一次进入页面时会出现一下闪屏现象
原因为：我的bg2.png图片没有预加载，在js切换到它时它并没有加载完成，所以出现闪屏
解决办法：先预加载图片，再添加效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1 {
width: 100vw;
height: 100vh;
background-position: center;
background-size: cover;
}
.bg1 {
background-image: url('./img/bg1.png');
}
.bg2 {
background-image: url('./img/bg2.png');
}
</style>
</head>
<body>
<div class="div1 bg1"></div>
<script>
window.onload = () => {
const div1 = document.querySelector('.div1');
const img1 = new Image();
img1.src = './igm/bg2.png';
img1.onload = function () {
const timer = setInterval( () => {
if(div1.classList.contains('bg1')) {
div1.classList.replace('bg1', 'bg2');
} else {
div1.classList.replace('bg2', 'bg1');
};
}, 1000);
};
};
</script>
</body>
</html>
定义一个Image对象，并为它设置src属性，就相当于为浏览器缓存了一张图片。
vw，vh不懂的参考文章：通俗易懂——css长度单位：px、em、rem、vh、vw、in、…
标签：png,classList,js,bg1,bg2,闪屏,背景图片,background,div1 来源： https://blog.csdn.net/qq_41176306/article/details/111869724