jquery - JQueryのBG画像プリローダー

Question

私は画像の配列を持っています

var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];

私はこの配列を循環し、間隔に基づいてそれらをdivの背景にします

$("#bgimg" + activeContainer).css({
        "background-image" : "url(" + photos[i] + ")",
        "display" : "block",
        "z-index" : currentZindex
    });

編集：setInterval関数を実行する前に、3つの画像すべてをプリロードする必要があります。

前もって感謝します！！

Answer 1

ロードする必要のある画像の数に変数を設定します。画像の読み込みが完了するたびにカウンターをデクリメントし、カウンターがゼロになったら画像の表示を開始します。

function photoLoaded() {
    if(!--numPhotosLeft) {
        // start showing images
    }
}

var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];
var numPhotosLeft = photos.length;

for(var i = 0; i < photos.length; ++i) {
    var img = new Image();
    img.onload = photoLoaded;
    img.src = photos[i];
}

Answer 2

(function($) {
    var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];

    var i = 0;
    function preloadImage() {

        var image = new Image();

        image.onload = function() {
            $("#bgimg" + activeContainer).css({
                "background-image" : "url(" + photos[i] + ")",
                "display" : "block",
                "z-index" : currentZindex
            });

            i++;
            preloadImage();
        };

        image.src = photos[i];


    };

}(jQuery);

この意志...

1. 画像を読み込む
2. コンテナの背景に設定します
3. 次の画像で繰り返す

Answer 3

あなたはこれを行うことができます：

var imgCount = images.length;
var counter = 0;
$.each(images, function(i, n) {
   // load each image
   $("<img />").attr("src", n)
               .load(function() {
                  counter++;
                  if(imgCount == counter) {
                     // all images have loaded
                     // call setInterval
                  }

              });
});