...

View Full Version : Intit Image arrays through iteration



paul6253
01-17-2005, 07:23 AM
Hi folks.
I would like to be able to initialize an image array
through code rather than typing.

Most times I see setups like this:
//preload images
var image1=new Image()
image1.src="image.jpg"
var image2=new Image()
image2.src="image2.jpg"
etc.

Thats fine for lets say 10 or so images
but what if it's like 100?
Even 40 is alot of del,backspace,highlight,etc

I decided to write a function to do the work
here it is but it does not work
I'm more adept in c so this JS is new to me
Thank you for any help

-Paul



function Preload(){
var x=1
var numimages= 100

//init images 1-99

function Preload(){
var x=1

for(;x<42;x++){
eval("var image"+x+"=new Image()")
eval("image"+x+".src"=tornado"+x+".jpg" )
}

}

Willy Duitt
01-17-2005, 09:13 AM
Here is a simular script I wrote some time ago...



<html>
<head>
<title>Post Load And Display Sequentially Numbered Images</title>
<BASE HREF="http://www.freewebs.com/foufou/">
<script type="text/javascript">
<!--// WRITTEN BY: WillyDuitt@hotmail.com 02/04/2004 //;
// PLEASE BEGIN BY ANSWERING THE FOLLOWING QUESTIONS! //;
// HOW MANY SEQUENTIAL IMAGES WOULD YOU LIKE TO SHOW? //;
var howMany = 4;
// USING QUOTES. WHAT IS THE PATH TO THE FIRST IMAGE? //;
var firstImage = 'eliza1.jpg';
// HOW MANY SECONDS BEFORE CHANGING IMAGES(.5 = ˝sec) //;
var speed = 5;
// USING QUOTES. USE FILTERS FOR IE USERS(yes | no)? //;
var filters = "yes";

////////////////////////////////////////////////////////;
// GLOBAL VARIABLES NO NEED TO EDIT BEYOND THIS POINT //;
var startNumber = (/\d+(?=\.)/.exec(firstImage));
var lastNumber = (startNumber*1)+(howMany-1);
var nextImage = (startNumber);

function loadSlides(){
for(var i=startNumber;i<=lastNumber;i++){
var postLoad = new Array();
postLoad[i] = new Image();
postLoad[i].src = firstImage.replace(/\d+(?=\.)/,i);
} showSlides("slider");
}

function showSlides(slider){
var image = document.images[slider];
if(document.all && filters.toLowerCase() == "yes"){
image.style.filter = "blendTrans(duration=3)";
image.filters.blendTrans.Apply();
image.filters.blendTrans.Play();
} if(nextImage > lastNumber){ nextImage = startNumber };
image.src = firstImage.replace(/\d+(?=\.)/,nextImage);
setTimeout('showSlides("slider")',speed*1000);
nextImage++;
}
//-->
</script>
</head>

<body onload="loadSlides()">
<div style="text-align:center;width:350px;height:280px">
<img name="slider" width="350" height="280" src="eliza1.jpg">
</div>

</body>
</html>


......Willy

paul6253
01-17-2005, 02:41 PM
thanks willy!
I have a few questions about some parts...
1) it works ok although it's choppy and not suitable
for an animation- maybe you can provide
insight on how to smooth the transitions
2)



function loadSlides(){
for(var i=startNumber;i<=lastNumber;i++){
var postLoad = new Array();
postLoad[i] = new Image();
postLoad[i].src = firstImage.replace(/\d+(?=\.)/,i);
} showSlides("slider");
}

function showSlides(slider){
var image = document.images[slider];
if(document.all && filters.toLowerCase() == "yes"){
image.style.filter = "blendTrans(duration=3)";
image.filters.blendTrans.Apply();
image.filters.blendTrans.Play();
} if(nextImage > lastNumber){ nextImage = startNumber };
image.src = firstImage.replace(/\d+(?=\.)/,nextImage);
setTimeout('showSlides("slider")',speed*1000);
nextImage++;
}



I'm a bit confused about 'postLoad'
used in the loop inside loadSlides().
It is static ?
In C++ this code would declare new variable on each iteration.
ok and then the Array object is instanciated as well
but how many elements does it return ? Why create a new array
on each iteration?
Also a string is passed to
It looks weird ,thats all
Thanks for any clarification showSlides() but it's used as
here -> var image = document.images[slider];
how can slider be used as an element accessor ?
Unless it's using the name parameter to reference the correct
displacement in the image array.
Thanks for any input
-Paul

singedpiper
01-17-2005, 07:22 PM
the issue with your code is trying to dynamically name variables, use an array

also, its a good idea to start thinking of item 0 as the first in a list, rather than item 1 ... its traditional compsci, and it makes things much easier



function Preload()
{
var i
var image = []

for(i=0;i<41;i++)
{
image[i]=new Image()
var name = ""
name = "tornado"+i+".jpg"
image[i].src = name
}
}

Willy Duitt
01-17-2005, 09:44 PM
thanks willy!
I have a few questions about some parts...
1) it works ok although it's choppy and not suitable
for an animation- maybe you can provide
insight on how to smooth the transitions
2) I'm a bit confused about 'postLoad'
used in the loop inside loadSlides().
It is static ?
In C++ this code would declare new variable on each iteration.
ok and then the Array object is instanciated as well
but how many elements does it return ? Why create a new array
on each iteration?
Also a string is passed to
It looks weird ,thats all
Thanks for any clarification showSlides() but it's used as
here -> var image = document.images[slider];
how can slider be used as an element accessor ?
Unless it's using the name parameter to reference the correct
displacement in the image array.
Thanks for any input
-Paul

1) If you want to use the slider part of the script for animations, try removing the transitions either completely or by: var filters = "no";... The filters is IE only anyway...

2) Yes, var postLoad = new Array(); should be taken out of the for loop if you wish to access the array other than simply caching the images... Probably will be a slight speed improvement also...

And prior to your editting your post I noticed you asked the difference between preloading and postloading...

Preloading is generally called in the HEAD outside of a function and was originally used to preload a limited number of small byte images often used in rollover so the images were immediately available on page load... The problem with using preloading for a signficant number of images or a limited number of large byte images is that it stalls the initial display of the page while these images are loaded into cache... If a user is on dialup and you are preloading 10 56K images you could possibly stalling the page for 10 seconds prior to any content is displayed and in which case, most of your visitors have already left...

Postloading solves this by wrapping the preload in a function and calling body onload and thus does not begin caching the images until the document has already been displayed...

Anyways, removing the filters and decreasing the speed should work for your animation problems... But had I known that your ultimate need was use for animation I would have provided another example... Eitherway, my intention was to provide a working example of how to cache simularly named but consectutive numbered images without the need to declare each image name...

....Willy

BTW: slider the arguement is passing slider the image name... showSlides("slider");

paul6253
01-21-2005, 07:16 PM
Thank you willy for the clarification!
signedpiper-
Yes, I agree with you generally about indexing from zero
however , I think it's trivial and certainly not 'easier ' for most
4th generation programmers to grasp.
BTW , you are conversing with someone who has designed,implemented,and deployed embedded software for various chips.
Im an old dog trying to learn some new tricks but
I think I know something about program logic!
Thankyou for your code snippet, it made sense.

-Paul



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum