Trying to find a jQuery image preloader

Question

Hi,

I am trying to find a working jQuery image preloader that plays well with the Marcofolio slideshow (here http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html).

The same slideshow is being used on the Philadelphia website here: http://www.visitphilly.com/ - but when I use my web developer tools to view the javascript at work I'm having a hard time trying to figure out exactly where the preloader is being a called.

I also tried using the following preload code, but it doesn't seem to help the situation (seems to load most slowly in the Safari browser):

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

  preload([
   'images/image1.jpg',
   'images/image2.jpg',
   'images/image3.jpg',
   'images/image4.jpg',
  ]);

If someone smart could inspect the visitphilly site element they may be able to see what I'm so obviously missing here. Alternatively, a preloading plugin suggestion would be appreciated, as I've tried a few which don't seem to help this particular slideshow.

Thank you!

Answer 1

You don't need jQuery for that:

var images = [
    'a.png',
    'b.png'//etc
];

var path = 'images/';
var i, image, img;
for(i = 0; image = images[i]; i++) {
    img = new Image();
    img.src = path + image;
}

Answer 2

Try to preload images in right order.

function preload(arrayOfImages) {
    var i = 0;

    function preloadnext() {
        if (i < arrayOfImages.length) {
            var img = new Image();
            img.onload = preloadnext;
            img.src = arrayOfImages[++i];
        }
    }

    preloadnext();
}

You can also specify image size ('new Image(width, height)') but I'm not sure if it can help.