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过渡的信息，请查看this

Laggy淡出淡出为背景

2 个答案: