javascript：一次预加载一个图像

我目前有一个旋转的背景，当页面加载时可以预加载图像。但是，如果可能的话，我想一次预加载一个图像

我的代码：

function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){


            $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
        });
    }
    $(document).ready(function () {

    var b = [<? $img = getContents(ROOT."/img/backgrounds/");
            foreach($img as $i)
            {   echo "\"" . $i . "\"";
                if($i != end($img)) echo ",";
            }
        ?>];
    preload(b);

    var r=Math.floor(Math.random()*b.length)
    $('#bg1').css("background-image", "url('/img/backgrounds/"+b[r]+"')");

    var alt = false;
    var delay = 50000;
    var speed = ((delay / 3)*2);
    var opacity = 1;

    setInterval(function() {
        var r=Math.floor(Math.random()*b.length);

        //put the individual preload code here

        switch(alt)
        {   case true:
                $('#bg1').css("background-image", "url('/img/backgrounds/"+b[r]+"')");
                $('#bg1').fadeTo(speed,opacity);
                $('#bg2').fadeOut(speed);
            break;
            case false:
                $('#bg2').css("background-image", "url('/img/backgrounds/"+b[r]+"')");
                $('#bg2').fadeTo(speed,opacity);
                $('#bg1').fadeOut(speed);
            break;
        }
        alt = !alt;
        }, delay);

    });

函数预加载（数组图像）{
$（arrayOfImages）.each（函数（）{
$('];
预载（b）；
var r=Math.floor（Math.random（）*b.length）
css（“背景图像”，“url”（'/img/backgrounds/“+b[r]+”）））；
var-alt=false；
var延迟=50000；
var速度=（（延迟/3）*2）；
var不透明度=1；
setInterval（函数（）{
var r=Math.floor（Math.random（）*b.length）；
//将单个预加载代码放在这里
开关（alt）
{大小写正确：
css（“背景图像”，“url”（'/img/backgrounds/“+b[r]+”）））；
$（'#bg1'）.fadeTo（速度、不透明度）；
$（'#bg2'）。衰减（速度）；
打破
案例错误：
css（“背景图像”，“url”（'/img/backgrounds/“+b[r]+”））；
$（'#bg2'）.fadeTo（速度、不透明度）；
$（'#bg1'）。衰减（速度）；
打破
}
alt=！alt；
}，延误）；
});

上面的代码很好用。如果有更好的方法，请告诉我！否则我怎么能一次预加载一个图像呢

function preload(arrayOfImages, index) {
    index = index || 0;

    if (arrayOfImages && arrayOfImages.length > index) {
        var img = new Image();
        img.onload = function() {
            console.log(arrayOfImages[index] + " loaded successfully");
            preload(arrayOfImages, index + 1);
        };
        img.src = arrayOfImages[index];
    }
}

---

为什么？这有点违背了预加载的目的。@Juhana如果是旋转幻灯片，第一张图像将在切换到下一张之前显示一段时间。下一张图像应在切换前预加载，但如果同时预加载所有即将到来的图像，则可能会干扰初始加载。加载sequ连续的整体图像允许更快地加载初始图像，然后在幻灯片中的下一个图像开始之前在背景中不可见地加载其余图像。