js切换图片会闪动_解决js控制元素背景图片切换时的闪屏问题

解决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

来源： https://blog.csdn.net/qq_41176306/article/details/111869724