Javascript 背景的淡入淡出

我希望网页的背景图像在下一幅图像淡入时淡出，我是这样做的：

    var backgrounds = [];
    backgrounds[0] = './img/bg.jpg';
    backgrounds[1] = './img/bg2.jpg';
    backgrounds[2] = './img/bg3.jpg';



function changeBackground() {
    currentBackground++;
if(currentBackground > backgrounds.length-1) currentBackground = 0;

$('.bgContainer').fadeOut(1500,function() {
    $('.bgContainer').attr('src', backgrounds[currentBackground]);
    $('.bgContainer').fadeIn(3000);
});



    setTimeout(changeBackground, 5000);
}

它的工作很好，但每次下一张图像在任何其他元素中淡出时，帧开始下降，变得非常滞后。有没有办法减少机架的跌落

.bgContainer{
position:fixed;
z-index: -1;
width:100vw;
height:100%;
top:0;
}

<img class="bgContainer" src = "./img/bg.jpg">

.bgContainer{
位置：固定；
z指数：-1；
宽度：100vw；
身高：100%；
排名：0；
}

使用css转换而不是jQuery。我发现移动设备尤其如此

通过javascript或jQuery添加一个类，并在该类中应用您想要的效果

---

看看你是否想了解更多关于CSS转换的信息，我不知道你是否可以使用CSS转换实现浏览器兼容性，但你可以尝试以下方法：

.bgContainer {
    transition: opacity 1500ms ease-in-out;
}

及

这样，您就不会使用javascript来更改css属性，而是使用CSS3来淡化背景的不透明度

---

与javascript动画相比，它的滞后性要小得多，但只适用于现代浏览器。ie10+

您的延迟是由于只使用一张图像造成的-您正在等待一次淡入淡出完成，然后再开始第二次淡入淡出。要获得这种过渡效果，您将需要至少2张绝对位置的图像，以便在两者之间淡入淡出（如果使用jquery）。

$('.bgContainer').css('opacity', 0);

setTimeout(function() {
    $('.bgContainer').attr('src', backgrounds[currentBackground]);
    $('.bgContainer').css('opacity', 1);
}, 1500);