I have a preload script for an image gallery that only seems to work in Safari

[matt9807]

The following is a script that I have written that preloads images for an image gallery. The problem is that the images only preload in Safari, other browsers load each image when it is called. Any ideas?

imgSeries = new Array();
curImg = '';
 
function loadkill() {
    document.getElementById('loadingtxt').style.display = "none";
    document.getElementById('imgone').src = imgSeries[0];
    document.getElementById('imgtwo').src = imgSeries[1];
}
 
 
for (i=0; i<=104; i++) {
 
    if (i<10) {
        i = '00' + i;
    } else if (i>=10 && i<100) {
        i = '0' + i;
    }
    curImg = 'images/img' + i + '.jpg';
    imgSeries.push(curImg);
}
 
function preloadImgs() {
    // Preload Images
    preload_image_object = new Image();
    for (i=0; i<=imgSeries.length; i++) {
         preload_image_object.src = imgSeries[i];
    }
}
 
// Begin next, previous and indexing
pg = 0;
imgCt = imgSeries.length - 1;
 
function processPrevious() {
    if (document.images && pg > 0) {
        pg--;
        document.getElementById('imgtwo').src = imgSeries[pg+1];
        document.getElementById('imgone').src = imgSeries[pg];
    }
}
 
function processNext() {
    if (document.images && pg < imgCt) {
        pg++;
        document.getElementById('imgtwo').src = imgSeries[pg+1];
        document.getElementById('imgone').src = imgSeries[pg];
    }
 
}

[pronerd]

Did you enable the caching attribute(s) in the HTML meta tags? If not you should be able to google for examples of them. I do not have the syntax in front of me at the moment.

[Logician]

In this loop you are using i both as a counter and as an index

for (i=0; i<=104; i++) {
 
    if (i<10) {
        i = '00' + i;
    } else if (i>=10 && i<100) {
        i = '0' + i;
    }
    curImg = 'images/img' + i + '.jpg';
    imgSeries.push(curImg);
}

In the function below you create a single Image object, then in the time it takes to execute the loop, you assign multiple source files to it, each overwriting the previous.

 function preloadImgs() {
    // Preload Images
    preload_image_object = new Image();
    for (i=0; i<=imgSeries.length; i++) {
         preload_image_object.src = imgSeries;
    }
}
 

In the loop above, when i is equal to imgSeries.length, which element will be indexed?