Image preloading with array

Question

Hi, I am using the following code to preload images in an image gallery:

$(window).bind('load', function(){

var imageNumber = $(".image").attr("alt");
var imageUp = parseInt(imageNumber) + 1 
var imageUp2 = parseInt(imageNumber) + 2    
var imageDown = parseInt(imageNumber) - 1
var preload = [
    'image' + imageUp + '.jpg',
    'image' + imageUp2 + '.jpg',
    'image' + imageDown + '.jpg',
    ];

    $(document.createElement('img')).bind('load', function(){
    if(preload[0]) this.src = preload.shift();
     }).trigger('load');          

});

I modified another basic javascript/jQuery preload script, adding variables in order to get a numeric value from the current image's alt-tag and preload images that are immediately before and after it (n+1 n+2 n-1) in the gallery. This works, though I imagine it may be kind of ugly.

What I want to do is add or call another array containing all images in the directory, so that after the previous and next images have loaded, the current page continues to preload other images, saving them in the browsers catche for future viewing as the user moves through the gallery.

Ideally, this second array would be called from an external .js file, so as to prevent having to update every page individually. (Or maybe it would be easier to save the entire script in a external .js file for each directory and fill out the rest of the array based on that directory's contents?).

Web design is only a hobby for me (I'm a photographer), so my knowledge of javascript is limited--just enough to customize pre-built functions and collage scraps of code.

I would really appreciate if someone could point me in the right direction on how to modify my code.

Thanks in advance,

Thom

Answer 1

I have never used a jQuery preload script but i have done a lot of preloading with 'vanilla' javascript. Try the code i have added below, it may solve your problem.

function preLoad() { // my preload function;
    var imgs = arguments, imageFolder = [];

    for (var i = 0; i < imgs.length; i += 1) {
        imageFolder[i] = new Image();
        imageFolder[i].src = imgs[i];
    }
}

var gallary = []; // all gallary images

$(window).bind('load', function(){

var imageNumber = $(".image").attr("alt");
var imageUp = parseInt(imageNumber) + 1 
var imageUp2 = parseInt(imageNumber) + 2    
var imageDown = parseInt(imageNumber) - 1
var preload = [
    'image' + imageUp + '.jpg',
    'image' + imageUp2 + '.jpg',
    'image' + imageDown + '.jpg',
    ];

    $(document.createElement('img')).bind('load', function(){
    if(preload[0]) this.src = preload.shift();
     }).trigger('load'); 

  preLoad(gallary); // preload the whole gallary
});

EDIT

preLoad() : this function accepts image urls as arguments e.g preLoad('image_one.jpg', 'image_two.jpg','image_thre.jpg');

The preLoad function has two variables var imgs and var imageFolder, imgs stores all the image urls and imageFolder stores image Objects, that is, preload loaded images.