PDA

View Full Version : pre-loading images

spearchucker
04-16-2003, 01:55 AM
In my website, when you rollover certain navigation buttons, (images), they are replaced by other images, simple javascript. My problem is that the rollover images load too slowly so the first impression that the user gets is delayed because it has to wait for them to download. Is there a way to pre-load these hover images so they appear instantaneously when the rollover event occurs?

Thanks,
Brian
ianmh
04-16-2003, 02:07 AM
Here is a little script a got from irt.org. I modified it to recognize clicked images and keep them on. If you only want the rollover code then remove setOnClick() and variables. Don't forget to put onLoad='imageLoad()' in your body tag so you pre-load the images. I find this code pretty zippy.

var flag = false;
var currentOn = null; // current on image
var previousOn = null; // prvious on image

// preload on images
function imageLoad() {
if (document.images) {
img1on = new Image(); img1on.src = "/images/nav/1_on.gif";
img2on = new Image(); img2on.src = "/images/nav/2_on.gif";
img3on = new Image(); img3on.src = "/images/nav/3_on.gif";
img4on = new Image(); img4on.src = "/images/nav/4_on.gif";
img5on = new Image(); img5on.src = "/images/nav/5_on.gif";
img6on = new Image(); img6on.src = "/images/nav/6_on.gif";
return (flag = true); // set flag to true so function can now work
}
}
// preload off images
if (document.images) {
img1off = new Image(); img1off.src = "/images/nav/1_off.gif";
img2off = new Image(); img2off.src = "/images/nav/2_off.gif";
img3off = new Image(); img3off.src = "/images/nav/3_off.gif";
img4off = new Image(); img4off.src = "/images/nav/4_off.gif";
img5off = new Image(); img5off.src = "/images/nav/5_off.gif";
img6off = new Image(); img6off.src = "/images/nav/6_off.gif";
}
// on function
function rollIn(imgName) {
if (document.images && (flag == true)) {
document[imgName].src = eval(imgName + "on.src");
}
}
// off function
function rollOut(imgName) {
if (document.images && imgName != currentOn){
document[imgName].src = eval(imgName + "off.src");
}
}

// setOnClick
function setOnClick(imgName) {
previousOn = currentOn;
currentOn = imgName;
document[imgName].src = eval(imgName + "on.src");
if(previousOn != null)
document[previousOn].src = eval(previousOn + "off.src");
}
scruff
04-16-2003, 10:44 AM
That is too cool! I've had similar problems in the past, but didn't realize there might be a way to solve it. Dial-up sucks...
spearchucker
04-16-2003, 02:12 PM
That is great, do you have a sample page up that I could look at to see how you implement this script?
Thanks for your time,
Brian
ianmh
04-16-2003, 09:46 PM
Fixed a slight bug with setOnClick(), when you click a button twice with the old code if its the same button it turns off. This fixes it.

You can see this script at work at http://www.imhmedia.net

Site is a work in progress, and my code comes from a js include.


// setOnClick
function setOnClick(imgName) {
if(currentOn != imgName) {
previousOn = currentOn;
currentOn = imgName;
document[imgName].src = eval(imgName + "on.src");
if(previousOn != null)
document[previousOn].src = eval(previousOn + "off.src");
}
}
agent002
04-17-2003, 02:29 PM
You could use this more simple code. Place this in the header of the page (between <head> and </head>).
<script language="JavaScript" type="text/javascript"><!--
// Images to preload
var PreloadImages=new Array("image1.gif", "image2.gif");


var preloader=new Array();
for(var ay=0; ay<PreloadImages.length; ay++){
preloader[preloader.length]=new Image();
preloader[(preloader.length-1)].src=PreloadImages[ay];
}
//--></script>
ucm
07-25-2003, 11:58 AM
Below is the code i've been working with....

the problem is that when i use the code:
blahblahimage.src=lalala.src
then the browser seems to either download the image again or ( possibly ) checks the image properties on the server and THEN load in what's been previously downloaded...

My goal is to have images downloaded in 1x frame and then have other frames display these images withOUT the browser having to contact the server before displaying anything...

one of my projects will be dealing with a looot of reused images in various pages so having all of them preloaded in 1x frame and then displayed as needed on various pages in other frames would be Most advantagous...


any ideas?



<html>
<head>
<title>Preload Image Page</title>

<script language="JavaScript" type="text/javascript"><!--
// Images to preload
var PreloadImages=new Array("../images/bg.jpg","../images/bg1.jpg","http://www.dynamicdrive.com/dynamicindex4/plane1.gif","http://www.dynamicdrive.com/dynamicindex4/plane2.gif","http://www.dynamicdrive.com/dynamicindex4/plane3.gif","http://www.dynamicdrive.com/dynamicindex4/plane4.gif")



var preloader=new Array();
for(var ay=0; ay<PreloadImages.length; ay++){
preloader[preloader.length]=new Image();
preloader[(preloader.length-1)].src=PreloadImages[ay];
}//--></script>

</head>
<body bgcolor="#FFFFFF">

<img id="dude" src="">

<a onmouseover="this.style.cursor='hand'" onclick="blah()">Click Here</a>



<script>

function blah(){
document.getElementById('dude').src=preloader[1].src
}
document.getElementById('dude').src=preloader[0].src

</script>

</body>
</html>