解决js控制元素背景图片切换时的闪屏问题
看一个例子：
Document
.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');
}
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);
}
我想实现的效果就是div1的背景图片来回切换，时间间隔为1s。
效果实现了，但第一次进入页面时会出现一下闪屏现象
原因为：我的bg2.png图片没有预加载，在js切换到它时它并没有加载完成，所以出现闪屏
解决办法：先预加载图片，再添加效果
代码如下：
Document
.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');
}
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);
};
};
定义一个Image对象，并为它设置src属性，就相当于为浏览器缓存了一张图片。
标签：png,classList,js,bg1,bg2,闪屏,背景图片,background,div1
来源： /qq_41176306/article/details/111869724
如果觉得《js切换图片会闪动_解决js控制元素背景图片切换时的闪屏问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
