Предзагрузчик изображений BG в JQuery

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.

Заранее спасибо !!

Answer 1

(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 2

Установите переменную для количества изображений, которые должны быть загружены. Уменьшайте счетчик каждый раз, когда изображение завершает загрузку, а когда счетчик достигает нуля, начинайте показывать изображения.

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 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
                  }

              });
});