Checking if image exists 1

[Bixarrio]

Hi,

Sorry. I forgot to put a subject.

I wrote some script that preloads images before displaying them in a table. This works great with a nice progress bar, etc. but my problem is this: If one of the images can not be found, the progress bar stops at 95% (for 20 images) and then never displays any images, since it's waiting for all the images to be loaded first. How can I detect whether an image is missing, so that I can replace it with another ("transparent.gif&quot image?? _________________
Bixarrio
e = m * (c ^ 2)

 

[theEclipse]

hmm... I am pulling this out of a bag of tricks and I dont know if it will work, but...

var tempImg=new Image();
tempImg.onerror="this.src='transparent.gif';
tempImg.src="ImageOne.gif"

the only problem is this: if you dont have a file called transparent.gif, you will get a never ending loop and will crash the users computer. (I know some people that would try that on purpose! %-() Robert Carpenter
questions? comments? thanks? email me!
linkemapx@hotmail.com
Icq: 124408594

AIM & MSN: robacarp

 

[Bixarrio]

The problem is that it doesn't give an error.

I used..

var tempImg = new Image();
tempImg.onload = chkLoad(); //Move the progressbar
tempImg.src = "ImageOne.gif";

The problem is that the missing images never fires the onload, which causes the progressbar to never reach 100%, and that results in the images never being displayed. _________________
Bixarrio
e = m * (c ^ 2)

 

[theEclipse]

>The problem is that it doesn't give an error.

I am not sure what you mean by this, but try this:

tempImg.onerror=chkLoad(); Robert Carpenter
questions? comments? thanks? email me!
linkemapx@hotmail.com
Icq: 124408594

AIM & MSN: robacarp

 

[Bixarrio]

If the image doesn't exist, the onerror event does not fire.

I tried this:

tempImg.onerror=alert('image could not be loaded');

And nothing happened. It stopped. I got no alert. _________________
Bixarrio
e = m * (c ^ 2)

 

[Bixarrio]

Thanks.

I sorted it out. Couldn't have done it without your help.

Here it is:

var count = 0;
var tempImg = new Array;
tempImg[0] = new Image();
tempImg[0].src = "ImageZero.gif";
tempImg[0].onload = chkLoad; //Report Progress
tempImg[0].onerror = doError; //Process error
tempImg[1] = new Image();
tempImg[1].src = "ImageOne.gif";
tempImg[1].onload = chkLoad; //Report Progress
tempImg[1].onerror = doError; //Process error
tempImg[2] = new Image();
tempImg[2].src = "ImageTwo.gif";
tempImg[2].onload = chkLoad; //Report Progress
tempImg[2].onerror = doError; //Process error

function doError() {
  this.src = "transparent.gif";
  this.onload = chkLoad;
}

function chkLoad() {
// I edited this code to make it shorter
  var prog = ""
  count++;
  prog="Loaded ";
  prog+=count;
  prog+=" of ";
  prog+=tempImg.length;
  prog+=" images";
  // progress is a <DIV> in the html.
  document.getElementById(&quot;progress&quot;).innerText=prog;
  If (count==tempImg.length) {
    // All images are loaded, so display them.
    for (i=0; i<tempImg.length; i++) {
      document.getElementById(&quot;img_&quot;+i).src=tempImg[i].src;
    }
  }
}

Works great!

Thanks again. _________________
Bixarrio
e = m * (c ^ 2)

 

[theEclipse]

cool beans! now, just make sure that you always have the file transparent.gif in your directory! Robert Carpenter
questions? comments? thanks? email me!
linkemapx@hotmail.com
Icq: 124408594

AIM & MSN: robacarp