Question

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