prelaod images

Konstantin Krolikov
Konstantin Krolikov used Ask the Experts™
on
hello experts,
as i wrote in the title, i want to create code the preload images into array or something that canot be seen, then i want that on click of a button the picture change to the next one WITHOUT LOADING.

basically i want array with loaded imgaes, and then if the use change's  the photo, it will change extremely fast(when the preload done..)

thanks ahead.. :)
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try this.

Author

Commented:
didn't help me..

Commented:
Try mod below:
<html>
<head>
<title>Preload Images Using JS</title>
<SCRIPT language=JavaScript type=text/javascript>
//This script will preload the source of your images into memory 
 var imageArr = new Array(4);
 var countval = 0;
 function img_pre_load() {
  imageArr[0] = new Image();
  imageArr[0].src = "http://yoururl/image_name.gif";
  imageArr[1] = new Image();
  imageArr[1].src = "http://yoururl/image_name.gif";
  imageArr[2] = new Image();
  imageArr[2].src = "http://yoururl/image_name.gif";
  imageArr[3] = new Image();
  imageArr[3].src = "http://yoururl/image_name.gif";
  imageArr[4] = new Image();
  imageArr[4].src = "http://yoururl/image_name.gif";
}

function next_p() {
 document.getElementById("img1").src = imageArr[countval].src; 
   countval += 1;
   if (countval > 4) countval = 0;
   alert(countval)
 }
</SCRIPT>
</head>
<body onLoad="img_pre_load();">
<div>
 <img id="img1" src=nil.jpg>
 <br>
 <input type=button id=next_pict value=" > " onclick="next_p();">
</div>
</body>
</html>    

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial