BG Image preloader in JQuery

Question

I have an array of images

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

I am cycling through this array and making them the background of a div based on a interval

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

EDIT: I need to preload all three images before I do my setInterval function.

Thanks in advance!!

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

This will...

1. load your image
2. set it to background of your container
3. repeat with next image

Answer 2

Set a variable to the number of images that have to be loaded. Decrement the counter each time an image finishes loading, and when the counter reaches zero, start showing the images.

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

You could do this:

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
                  }

              });
});