Preload next number (image) in array on a click of a mouse

Giganews Newsgroups
Subject: Preload next number (image) in array on a click of a mouse
Posted by:  askriā€¦@finlina.is (Wonko)
Date: 5 Jul 2003

Here's my problem if anyone could be so kind to help me out. I assume
it's quite easy for an experienced programmer but I'm not one of them
:)

I have a JavaScript code that:
- displays multiple images (+40) in a single image placeholder on ONE
page
- pre-loads multiple images
- on a click of a mouse changes to the next image
- on a click of a mouse changes to the previous image

PROBLEM:
1. all the images pre-load and eat up the bandwith
2. The images are not put in the browser's cache for easy loading
later on

SOLUTIONS REQUESTED:
1. that when I click "next" the next image is displayed PLUS the image
AFTER that one is loaded

2. If possible, that the images be loaded in the browsers cache.

Thank's for your time...

THE JAVASCRIPT CODE:

<script language="Javascript">
<!--

function switchImg(from,to){
        document[from].src = eval(to + ".src");
}

count = 0;
MyImages = new Array();
MyImages[0]=new Image();
MyImages[0].src='arnor00.jpg';
MyImages[1]=new Image();
MyImages[1].src='arnor01.jpg';
MyImages[2]=new Image();
MyImages[2].src='arnor02.jpg';
MyImages[3]=new Image();
MyImages[3].src='arnor03.jpg';
MyImages[4]=new Image();
MyImages[4].src='arnor04.jpg';
MyImages[5]=new Image();
MyImages[5].src='arnor05.jpg';
MyImages[6]=new Image();
MyImages[6].src='arnor06.jpg';
MyImages[7]=new Image();
MyImages[7].src='arnor07.jpg';
MyImages[8]=new Image();
MyImages[8].src='arnor08.jpg';
MyImages[9]=new Image();
MyImages[9].src='arnor09.jpg';
MyImages[10]=new Image();
MyImages[10].src='arnor10.jpg';

function loadImg(from,to){
        document[from].src = to;
}

function Next(){
if (count < MyImages.length - 1){
count = count + 1;
document.paintings.src = MyImages[count].src;

}
else {
count = 0;
document.paintings.src = MyImages[count].src;
}

}
function Back(){
if (count > 0){
count = count - 1;
document.paintings.src = MyImages[count].src;

}
else {
count = 4;
document.paintings.src = MyImages[count].src;
}

}
//-->
</script>

Replies