PDA

Click to See Complete Forum and Search --> : image preload ??

bjoerndalen
03-20-2003, 03:59 PM
Hi guys...

I posted a problem on here a while ago and got a great response so I thought I'd try again.

I believe that it is possible to use Javascript to load images into memory so that when they are required ie on a mouseover there is no delay.

Could someone point me in the right direction on the coding to achieve this.

Much appreciated..

Dave
pyro
03-20-2003, 04:09 PM
It is actually quite easy... Try:

img1 = new Image()
img1.src = "yourimg.gif"
bjoerndalen
03-20-2003, 04:16 PM
Cool....That was quick...

How thick am I....no don't answer that.

Is that it..

Is it not part of any function or called from the onload event ?

Just do the same for each image?

Dave

:o
pyro
03-20-2003, 04:25 PM
Yup, that should be about it, but you call your rollover like this then...

<a href="your.htm" onmouseover="document.imgname.src=img1.src" onmouseout="document.imgname.src='youroriginal.gif'"><img src="youroriginal.gif" name="imgname"></a>

So, basically you have this in your <head>

<head>
<script language="javascript" type="text/javascript">
img1 = new Image()
img1.src = "yournew.gif"
//more here
</script>
</head>

Note: I didn't test this, so let me know if it does not work...
bjoerndalen
03-20-2003, 04:30 PM
Brilliant..

I'll give it a go over the next couple of days..

Thanks..

Dave :D
sabbath180
07-27-2003, 07:05 AM
Hi. I have a similar question.

I have an image rollover link in the style of the code you posted. image1 changes to image2 as the mouse moves over it. I want to make it so that the link cannot be clicked before both images have loaded (otherwise the rollover effect will not be seen). Will your code do this? Or is there something I need to add?

The problem stems from the fact that each image is 25KB, so they take a bit of time to load on a slow connection. Please help, I am very new to HTML and Java.

Many thanks.
Charles
07-27-2003, 07:17 AM
We can shorten things up a bit by using the handlers of the image itself.

<a href="your.htm"><img src="youroriginal.gif"onmouseover="this.src = img1.src" onmouseout="this.src = 'youroriginal.gif'></a>