滞后淡入淡出背景

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添加一个类，然后将所需的效果应用到该类。

看看这个如果u想要更多关于CSS过渡