473,224 Members | 1,685 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,224 software developers and data experts.

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

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>
Jul 20 '05 #1
2 4009
as*****@finlina.is (Wonko) writes:
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>
---
Try it, but be warned that it is untested.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2
Lasse Reichstein Nielsen <lr*@hotpop.com> wrote in message news:<sm**********@hotpop.com>...
as*****@finlina.is (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...
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Csaba2000 | last post by:
I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE 5.5+). This should work regardless of whether IE has focus. Normally you would...
7
by: MALdito | last post by:
hi everybody let me say right from the start .. I´m not a coder ... "just" a designer! that said .. here is my question: I´m using dreamweaver´s built in preloader for a menu. it looks like...
3
by: Bob | last post by:
I usually use some "pre-load" code in my pages to preload graphics that will be swapped. But, I'm thinking that rather than the long, repetitive, once, for each graphic hardcoded stuff like this: ...
1
by: Harod Ruthgar | last post by:
var image = new Image(); image.src="pathToTheFile"; The above code is called 25 times (with different pathToTheFile) within a loop. I manually checked the cache directory and not all images...
15
by: Tony Gahlinger | last post by:
I'm using my browser (Mozilla/5.0 Linux i686 Gecko/20031007 Firebird/0.7) to do some client-side image processing. I want to capture the sequence of coordinates a user clicks on in xxx.jpg in the...
2
by: Albert Spencil | last post by:
I have tried several preload scripts found here; plus, some of my own. The only thing that works is the unsophisticated loading of those tiny images. The download consist of 100+ images amounting...
4
by: shapper | last post by:
Hello, I think to preload an image I should us something like: img = new Image(); img.src = 'images/img.jpg'; Could someone tell me how to create a loop which would preload a list of...
2
by: matt9807 | last post by:
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...
3
by: Revathi Balakrishnan | last post by:
Hi i have the used the below code to switch the button image on mouseover and mouseout. <html:button property="Button" value="Display" styleClass="displaybutton" ...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.