Forum Moderators: open

Message Too Old, No Replies

How to check if image file exists

         

ThomasAJ

1:42 am on Oct 6, 2005 (gmt 0)

10+ Year Member



I load a JPG file into an image SRC property and use ONERROR to load another image if the file does not exist thus:

do {
document.slideshow.src = NewImg[ImgNum];
}
while (document.slideshow.onerror == true);

But the loop does not execute a subsequent time if the file does not exist. What am I doing wrong?

Thanks

Tom

Tidal2

1:19 pm on Oct 6, 2005 (gmt 0)

10+ Year Member



I couldn't get your method to work so I tried this which seems to work in IE-

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
image1 = new Array("invalid-image1.jpg","invalid-image2.jpg","valid.jpg")
imgNo=0
function newImage1() {
imgNo+=1
document.getElementById("image1").innerHTML='<img src="'+image1[imgNo]+'" onError="newImage1()">'
if (imgNo>image1.length) {document.getElementById("image1").innerHTML='no valid images!';return}
}
//-->
</script>
</head>
<body>
<span id="image1">
<img src="invalid-image1.jpg" onError="newImage1()">
</span>
</body>
</html>

I think onerror is a MS special and not supported by Firefox and perhaps other browsers.

broniusm

1:39 pm on Oct 6, 2005 (gmt 0)

10+ Year Member



onError is an event, not a property-- you can take advantage of it by defining an event handler as in Tidal's example.

Bernard Marx

1:58 pm on Oct 6, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have had a go at this one in past threads. A solution can go something like:

function checkImage(url)
{
var img = new Image;
img.onerror = img_onError;
img.src = url;
}

function img_onError()
{
alert(this.src);
}

However, I can never get it to work in Mozilla. I can't even work out from the (sparse) documentation whether the event is supported on images at all.

A workaround could involve using onload, and a timeout with a presumed "if it ain't here by now, it ain't coming ever" time allocation.

broniusm

2:05 pm on Oct 6, 2005 (gmt 0)

10+ Year Member



A workaround could involve using onload, and a timeout with a presumed "if it ain't here by now, it ain't coming ever" time allocation.

Good idea. Maybe a check against img.width (or some other property which would only be there if the image is there) would help.

ThomasAJ

9:33 pm on Oct 6, 2005 (gmt 0)

10+ Year Member



Onerror IS an event. I finally worked that out, thanks.

I used the 'if onerror then execute function' solution.

Are you 100% sure it won't work on Firefox, they're getting some serious market share.

Bernard Marx

9:42 pm on Oct 6, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There was a thread a while back where WM member, jalarie, insisted that it does work in Moz. I stickied him a few hours ago and asked him to show me how it's done. His example worked. It was linking to an image directly on his server.

I tried the example I posted earlier, but this time on a page on my local server, and it worked. So it seems that it does work in Moz, but not over the file: protocol. ie You can't test it on your PC's file system.

ThomasAJ

10:26 pm on Oct 6, 2005 (gmt 0)

10+ Year Member



Many Thanks