滞后淡入淡出作为背景

Question

我希望我的网页的背景图像随着下一个图像的消失而淡出，我这样做：

    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">

Answer 1

我不知道您是否可以使用css转换来实现浏览器兼容性，但您可以尝试如下：

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

和

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

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

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

要比javascript动画慢得多，但只能在现代浏览器上工作。ie10+

Answer 2

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

通过javascript或jQuery添加一个类，并应用该类所需的效果。

如果您想更多地了解CSS转换，请查看这。