CSS-background图像预加载

时间:2013-05-28 12:03:12

标签: css background-image preload

我有2个div用于幻灯片和大约10个幻灯片图像。我读了许多教程如何预加载这些图像,但我仍然无法让它工作:( 我是jQuery的新手,所以这段代码可能包含maaany自行车)) 希望你能帮我弄清楚什么是错的。

$(function () {
    var mainDiv = $("#homeBanner");
    var secondDiv = $("#homeBanner2");
    var aImages = [];
    var imgCount = 10;
    var iRnd = 0;


    $(document).ready(function () {
        for (var i = 0; i <= imgCount; i++) {
            aImages[i] = new Image();
            aImages[i].src = "url-to-image" + (i) + ".jpeg";
        }
        setInterval(function () {

            if (iRnd < imgCount) {
                iRnd++;
            } else {
                iRnd = 0;
            }

            secondDiv.queue(function () {
                mainDiv.css("background-image", 'url(' + aImages[iRnd].src + ')');
                secondDiv.dequeue();
            });

            secondDiv.animate({
                opacity: 0
            }, 2000, "swing");
            secondDiv.queue(function () {
                secondDiv.css("background-image", 'url(' + aImages[iRnd].src + ')');
                secondDiv.dequeue();
            });

            secondDiv.animate({
                opacity: 1
            }, 0);

        }, 3000);

    });
});

0 个答案:

没有答案