Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Preload images 1

Status
Not open for further replies.
glenmac

glenmac

Technical User
Joined
Jul 3, 2002
Messages
947
Location
CA
I have a bunch of images that are numbered sequentialy. I would like to preload the images using a loop. The images are numbered from 001 to 027. I'm having trouble with the syntax, does anyone out there have any ideas.
Pseudo code;
Code: 
	for (x = 001; x<028; x++){ 
		preImages[x] = new Image()
		preImages[x].src = x.jpg

Glen
 
Sort by date Sort by votes

Glen,

Check out this FAQ that I created the other day - it may well apply for your purposes, and if it doesn't it can very easily be modified.

faq216-4652

Hope this helps!

Dan
 
Upvote 0 Downvote
Glen,

Sorry - should have answered your question too:

Code: 
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
function padToThreeDigits(num)
{
  var s = '' + num;
  while (s.length<3) s = '0' + s;
  return(s);
}

var preImages = new Array();
for (x=1; x<28; x++)
{ 
  preImages[x] = new Image()
  preImages[x].src = padToThreeDigits(x) + '.jpg';
}
//-->
</SCRIPT>

Hope this helps!

Dan
 
Upvote 0 Downvote
Thanks Dan!! A star for you.
I've added the script to my page and hopefuly I've done it correctly. I can't really tell as I have the page on my own server and don't know if there's a lag between images.
Below is my code for the page, could you check it to see if I've added your script properly please.
Code: 
<html>
<head>
<title>SlideShow</title>
<META HTTP-EQUIV=&quot;imagetoolbar&quot; CONTENT=&quot;no&quot;>
<script language=&quot;JavaScript1.1&quot;>
<!--
function padToThreeDigits(num) //Preload script
{
  var s = '' + num;
  while (s.length<3) s = '0' + s;
  return(s);
}

var preImages = new Array();
for (x=1; x<28; x++)
{ 
  preImages[x] = new Image()
  preImages[x].src = padToThreeDigits(x) + '.jpg';
}

//end preload

var begin=1 //slide show script
var end = 27
var which = begin;

function geturl(n){
n = String('00' + n);

return (n).substring(n.length - 3, n.length) + '.jpg';
}

function backward(){
if (which>begin){
	window.status='Enjoy the Show'
	which--
	document.images.photoslider.src=geturl(which);
	document.getElementById('pics').style.display='block';
}
}

function Auto(){
if (which<end){
	document.images.photoslider.src=geturl(which);
	which++
	setTimeout(&quot;Auto()&quot;,3000);
	document.getElementById('rotater').style.display='none'
}
	else {
		document.getElementById('rotater').style.display='block';
		document.getElementById('pics').style.display='none';
}
}
function forward(){
if (which<end){
	which++
	document.images.photoslider.src=geturl(which);
	document.getElementById       ('pics').style.display='block';
}
	else window.status='End of gallery'
}
//-->
</SCRIPT>
</head>
<body bgcolor = &quot;wheat&quot; style = &quot;margin-top:2px; margin-left:0px; margin-right:0px;&quot; onload = &quot;Auto()&quot;>

<div  align = &quot;center&quot; style = &quot;style=&quot;scroll:no;position:absolute; left:0px; top:0px; margin-top:0px; margin-bottom:0px &quot; id = &quot;rotater&quot;>
<h2 Style = &quot;margin-top:0px; margin-bottom:0px&quot;> I Hope You Enjoyed the Show. You may see the pictures again manualy</h2>
<form Style = &quot;margin-top:0px; margin-bottom:0px&quot;>
<input type=&quot;button&quot; value=&quot;<< Backward&quot; name=&quot;B2&quot;onClick=&quot;backward();&quot;> 
<input type=&quot;button&quot; value=&quot;Forward >>&quot; name=&quot;B1&quot;onClick=&quot;forward()&quot;>
<input type=&quot;button&quot; value=&quot;Back to the beginning&quot; name=&quot;B3&quot; onClick=&quot;which=begin+1; backward();&quot;>
</form>
</div>
<div style = &quot;margin-top:2px;&quot; align = &quot;center&quot; id = &quot;pics&quot;>
<img  src=&quot;001.jpg&quot; name=&quot;photoslider&quot;>
</div>
</body>
</html>


Glen
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lupidol
  • Locked
  • Question Question
Alternate images not working
Replies
2
Views
254
lupidol
lupidol
c0deM0nK424
  • Locked
  • Question Question
auto detect viewport or screen size and load different images for flexslider carosel ?
Replies
0
Views
265
c0deM0nK424
c0deM0nK424
BrotherArnold
  • Locked
  • Question Question
Mouseover div problem with swapping images
Replies
2
Views
210
BrotherArnold
BrotherArnold
emozley
  • Locked
  • Question Question
Inserting images with jQuery
Replies
0
Views
175
emozley
emozley
mwebbo1
  • Locked
  • Question Question
Multiple backround images
Replies
2
Views
200
darryncooke
darryncooke

Part and Inventory Search

Sponsor

Back
Top