1

我的 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 上会出现。

感谢您的回答！

4

0 回答 0