PDA

View Full Version : Problem with script

shashgo
10-19-2002, 08:51 PM
Help:
I can not figure out why the following script gives me an error (Ill mark the line and tell you what the error is). The error is in th efunction disp() and is
document.nisha.src=imgArray[Current].src;

The first time the script works as expected and I get the last image (#10) display. On the next iteration, I get the error at this line, that says
imgArr[...].src is null or not an object.

According to the script the value of Current here should be 9, and the image imgArray[9] should be displayed. Why am I getting this error?

---------------------------

<html>
<head>
<title>Nisha</title>
<script language="javascript">
<!--
var numImages=0;
var imgArray=new Array();
var imgNum;
var Current=0;
var pause;

function loadEm()
{
for (i=1;i<=20;i++)
{
pic=new Image();
pic.onload=function(){imgArray[numImages]=new Image();imgArray[numImages++].src=this.src;}
pic.src=i+".jpg";
}
alert("Done loading");
}

function inter()
{
pause=prompt("Number of images loaded"+numImages+"\nEnter interval for slideshow","2000");
disp();
}
function disp()
{
document.frm.disp.value="Picture "+Current;
document.nisha.src=imgArray[Current].src;
if (Current>0) Current--; else Current=numImages;
setTimeout("disp()",pause);
}

-->
</script>

</head>
<body onload="loadEm()">
<form name="frm"><input type="text" name="disp"></form><img src="" name="nisha" align="left">
<a href="javascript:inter()">Start slideshow"</a>
</body>
</html>
Mr J
10-19-2002, 09:34 PM
Have a play with this amended script, I could not get my head round your preloader so I replaced it with my own.

The slideshow is working as I think you want it to.



<html>
<head>
<title>Nisha</title>
<script language="javascript">
<!--
var numImages=8 // number of images
var Current=1;
var pause;

var YourImages = new Array()// list images to preload
YourImages[YourImages.length]="picture1.jpg"
YourImages[YourImages.length]="picture2.jpg"
YourImages[YourImages.length]="picture3.jpg"
YourImages[YourImages.length]="picture4.jpg"
YourImages[YourImages.length]="picture5.jpg"
YourImages[YourImages.length]="picture6.jpg"
YourImages[YourImages.length]="picture7.jpg"
YourImages[YourImages.length]="picture8.jpg"

var preloadYourImages=new Array() // preloads images
for (i=0;i<=YourImages.length-1;i++) {
preloadYourImages[i]=new Image()
preloadYourImages[i].src=YourImages[i]
}

function inter(){
pause=prompt("Number of images loaded"+numImages+"\nEnter interval for slideshow","2000");
disp();
}

function disp(){
document.frm.disp.value="Picture"+Current;
document.nisha.src="epic"+Current+".jpg"
if (Current>=numImages){
Current=1
setTimeout("disp()",pause);
}
else{
Current++
setTimeout("disp()",pause);
}
}
-->
</script>

</head>
<body>
<form name="frm"><input type="text" name="disp"></form>
<img src="" name="nisha" align="left">
<a href="javascript:inter()">Start slideshow"</a>
</body>
</html>
beetle
10-19-2002, 09:56 PM
Why not replace

var YourImages = new Array()// list images to preload
YourImages[YourImages.length]="picture1.jpg"
YourImages[YourImages.length]="picture2.jpg"
YourImages[YourImages.length]="picture3.jpg"
YourImages[YourImages.length]="picture4.jpg"
YourImages[YourImages.length]="picture5.jpg"
YourImages[YourImages.length]="picture6.jpg"
YourImages[YourImages.length]="picture7.jpg"
YourImages[YourImages.length]="picture8.jpg"

with

var yii = 0;
var YourImages = new Array()// list images to preload
YourImages[yii++]="picture1.jpg"
YourImages[yii++]="picture2.jpg"
YourImages[yii++]="picture3.jpg"
YourImages[yii++]="picture4.jpg"
YourImages[yii++]="picture5.jpg"
YourImages[yii++]="picture6.jpg"
YourImages[yii++]="picture7.jpg"
YourImages[yii++]="picture8.jpg"

just a thought....although it's most effecient to declare arrays on one line...

var YourImages = new Array("picture1.jpg","picture2.jpg","picture3.jpg","picture4.jpg","picture5.jpg","picture6.jpg","picture7.jpg","picture8.jpg");
shashgo
10-19-2002, 11:28 PM
Beetle & MrJ:

Your scripts load the array by specifying each filename. This is not what I want to do, I want to load the images using a forloop, because it is tedious, if not nervewracking, to enter, say 100 image names, one at a time.

What I am trying to do in the for loop that loads images is:
assign each image name(1.jpg,2.jpg,...) to a variable (pic). If and when that image loads successfully, assign that image name to an element of the imgArray array subscripted by an independent variable (imgNum) that keeps count of the successful loads. So, if I have 100 images and only 10 load successfully, then imgNum ould be 9 (10 minus 1). Similarly, if with the 100 images, 90 load successfully, then the value of numImages at the end of the loop should be 89. This is not happening, because whenever the total number of images that the script tries to load is 17 or more, the value of numImages is not that number-1. This should only happen if for 17 images, there are only fewer than 17 valid images. But I have images 1 to 134.jpg on my disk, so for a total of 134 imags, numImages should be 133 after the image load and this does not happen. But for a total of 17 images, I do get imgNum to be 16 afer the image load which is correct? So why doesnt the script work for more than 17 images?
beetle
10-20-2002, 01:28 AM
Well, there are some inherit problems with how you are doing this. The alerts cause delays that mess up the timing...plus the loop finishes faster than the images load.

I got some images I had laying around (weird stuff, nevermind what they are...) ranging from 2k to ~330k in size. You can see from the test page (http://www.peterbailey.net/test/) I did, the smallest images get loaded into the array first...the largest ones last.

Note: only odd-numbered images exist on the server...so any even-numbered image should error....

Let me know if this will work for you...