Question

我的jQuery代码有点问题。我有一个多个预加载图像的背景。我希望背景在一定时间内在这些图像之间切换。例如：

图像1作为背景淡入 15秒后淡出黑色图像2作为背景淡入 15秒后淡出黑色等

但问题是在Chrome上有一些非常短的滞后，我的访问者并不喜欢它。（例如，如果我们在textarea盒子上书写，它会在淡出黑色时冻结半秒钟。）

以下是代码：

var bgs = shuffle(["image1.png","image2.png","image3.png"]);
var actualBG = -1;
var endBG = bgs[bgs.length-1]; // "image3.png"

function changeBackground()
{
    if(actualBG == -1) // If it's the first time we fade in a background
    {
        $(".bg")
            .css({'background-image': 'url('+bgs[0]+'")'})
            .animate({opacity: 1}, 2000);
        setTimeout(changeBackground, 8000);
        actualBG++;
    } else {
        if(actualBG == endBG) // If we reached the end of the array
            actualBG = 0; // Go back to first slot
        else
            actualBG++; // Otherwise load the next background image

        $(".bg").animate({opacity: 0}, 'slow', function() {
            $(this)
                .css({'background-image': 'url('+bgs[actualBG]+')'})
                .animate({opacity: 1});
        });
        setTimeout(changeBackground, 15000);
    }
}

注意：Firefox上不会出现此问题，但Chrome上会出现此问题。

感谢您的回答！

jQuery代码滞后于某些用户不透明度

0 个答案: