Detect if src exist or not (<img src='does not exist'>) 2

[harmmeijer]

Can the <img .. > html tag detect of the scr exist or not?
If it does not exist can it automatically take an alternative image?
I made a javascript wich will preload all the images and another script which checks the widh and height of the preloaded images (I hope IE has got a fixed with and height for a 'broken' image)
Anyway here is the java code, if anyone knows a way to do this with a tag property of img please let me know.



<label id='loading' name='loading'>dsf</label>
<script language=javascript>
loading.innerText = &quot;Loading images&quot;;
var arrImg = new Array
var arrImgID = new Array
//here the asp page will loop through all the records to generate the html
// and this javacode (strhtm and strjavaclient)
arrImg[0] = new Image
arrImg[0].src = &quot;images/image17.jpg&quot;
arrImgID[0] = &quot;17&quot;
loading.innerHTML = &quot;&quot;;
//rs.movenext -> loop
</script>

<table>
<tr vAlign=top>
<td style='width: 4.9cm; height: 1.8cm;'></td>
<td style='width: 4.9cm; height: 1.8cm;'></td>
<td style='width: 4.9cm; height: 1.8cm;'></td>
</tr>
<tr vAlign=top>
<td style=&quot;width: 4.9cm; height: 3.64cm; cursor: hand&quot;>
<img src=&quot;images/image17.jpg&quot; alt='images/none.jpg'id=img17 name=img17 style=&quot;width: 4.9cm; height: 3.64cm&quot;>
</td>
</tr>
<tr vAlign=top>
<td style=&quot;cursor: hand&quot;>
Harm Meijer
</td>
</tr>
</table>
<script language=javascript>
var i = 0
while(i < arrImg.length) {
if(arrImg[0].width == &quot;28&quot; &&arrImg[0].height == &quot;30&quot {
eval('img' + arrImgID).src = &quot;notavaileble.jpg&quot;;
}
i++;
}
</script>

 

[xutopia]

<img src=&quot;myUrl&quot; onerror=&quot;myJSFunction()&quot;>

Never tried this but my reference tells me that it should work.

Hope this helps. Gary

http://www.xutopia.com

Haran

 

[harmmeijer]

Great, it works.
The myfunction could take the image as a variable to set the correct image like so

<img src='not exist.jpg' onerror=&quot;myfunction(this)&quot;>

Or just do like this:


<img src='not exist.jpg' onerror=&quot;this.src='exist.jpg'&quot;>

Better make sure that the exist.jpg does exist otherwise you get an out of stack space error (on error keeps being called).

I have made the folloing script to fix this:

<script language=javascript>
var imgDone = new Array
function myfunc(objImg,nr) {
var e = 0
while(e<imgDone.length) {
if(nr==imgDone[e]) {
return false
}
e++;
}
imgDone

= nr
objImg.src='exist.jpg';
}
</script>
<img src='not exist.jpg' onerror=&quot;myfunc(this,11)&quot;>

 

[KevinAr18]

Hey, that's interesting. I didn't know you could do that with onError

What reference did you use to find out about that?