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

[Wonko]

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>

 

[Lasse Reichstein Nielsen]

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

That sounds mysterious.
Prefetching/pre-loading images off-screen only serves one purpose:
to get them into the browser's cache. If they are not in the cache
later, it is either because the cache is too small, or because
they somehow told the browser that they should not be cached for long.

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.

Some code:
---
<script type="text/javascript">

var MyImages = ['arnor00.jpg', 'arnor01.jpg', 'arnor02.jpg',
'arnor03.jpg', 'arnor04.jpg', 'arnor05.jpg',
'arnor06.jpg', 'arnor07.jpg', 'arnor08.jpg',
'arnor09.jpg', 'arnor10.jpg'];
var numURLs = MyImages.length;
var count = 0;

var cacher = new Image();
cacher.src = MyImages[1]; // expects at least two URLs.

var prevCacher = newImage;
prevCacher.src = MyImages[numURLs - 1];

function Next(){
count = (count+1)%numURLs;
document.images['paintings'].src=MyImages[count];
var next = (count+1)%numURLs;
cacher.src=MyImages[next];
}

function Prev(){
count = (count-1)%numURLs;
document.images['paintings'].src=MyImages[count];
var prev = (count-1)%numURLs;
cacher.src=MyImages[prev];
}

</script>

 

[Wonko]

(e-mail address removed) (Wonko) writes:

Thanks for your help LRN...

That sounds mysterious.
Prefetching/pre-loading images off-screen only serves one purpose:
to get them into the browser's cache. If they are not in the cache
later, it is either because the cache is too small, or because
they somehow told the browser that they should not be cached for long.

Yes I agree that this is mysterious. In the code you gave me in the
"next function" it loads two image, next image and next image+1. but
it does that EVERY time, which is quite annoying. Can the hosting
provider (MediaTemple) have anything to say (configure) about that?
The page in question requires login as it's on a secure folder, does
that make a difference?

Try it, but be warned that it is untested.
/L

I did and there were minor errors in it, like you said... not tested.
Here is a functional code without errors if anyone is interested but I
couldn't verify that the preload works properly as it loads every time
on my page.

Changes:
"var PrevCacher" is out, shouldn't be neccessary if the image is
already in the cache from the "var chacher"

IF sentence added to the "back function" as it didn't display any
image if the first image in the series was loaded. now nothing
happens.

<script type="text/javascript">
<!--
var MyImages = ['arnor00.jpg', 'arnor01.jpg', 'arnor02.jpg',
'arnor03.jpg', 'arnor04.jpg', 'arnor05.jpg',
'arnor06.jpg', 'arnor07.jpg', 'arnor08.jpg',
'arnor09.jpg', 'arnor10.jpg', 'arnor11.jpg',
'arnor12.jpg', 'arnor13.jpg', 'arnor14.jpg',
'arnor15.jpg', 'arnor16.jpg', 'arnor17.jpg',
'arnor18.jpg', 'arnor19.jpg', 'arnor20.jpg',
'arnor21.jpg', 'arnor22.jpg', 'arnor23.jpg',
'arnor24.jpg', 'arnor25.jpg', 'arnor26.jpg',
'arnor27.jpg', 'arnor28.jpg', 'arnor29.jpg',
'arnor30.jpg', 'arnor31.jpg', 'arnor32.jpg',
'arnor33.jpg', 'arnor34.jpg', 'arnor35.jpg',
'arnor36.jpg', 'arnor37.jpg', 'arnor38.jpg',
'arnor39.jpg', 'arnor40.jpg',];
var numURLs = MyImages.length;
var count = 0;

var cacher = new Image();
cacher.src = MyImages[1];

function Next(){
count = (count+1)%numURLs;
document.images['paintings'].src=MyImages[count];
var next = (count+1)%numURLs;
cacher.src=MyImages[next];
}

function Back(){
if (count > 0){
count = (count-1)%numURLs;
document.images['paintings'].src=MyImages[count];
var prev = (count-1)%numURLs;
cacher.src=MyImages[prev];
}

else {
count = 0;
document.images['paintings'].src=MyImages[count];
}
}
//-->
</script>

and the links are of course:
<a href="javascript:Back ()">some text or image</a>
<a href="javascript:Next ()">some text or image>/a>

Thanks again...