1

現在、ページの読み込み時に画像をプリロードする回転する背景があります。ただし、可能であれば、一度に 1 つずつ画像をプリロードしたいと思います。

私のコード:

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);

    });

上記のコードは正常に動作します。良い方法があれば教えてください！しかし、それ以外の場合は、一度に 1 つのイメージをプリロードするにはどうすればよいでしょうか?

4

1 に答える 1

2 
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];
    }
}

フィドル

于 2013-01-25T13:24:19.190 に答える