Image Error Finder

[premshree]

This JavaScript checks if all the images in the document exists. If a particular image does not exist, that image will be replaced by a custom image! Works with IE only.

This is how it works. In IE, if a particular image does not show up, then its dimensions are 28 x 30 (without the 'alt'). So, the script checks all images with this size after removing the 'alt' tag. If such an image exists, it is a broken-image.


<script language="JavaScript">
function checkImages()
{
if(document.getElementById)
{
var imagesArr = new Array();
var setDefaultErrImg="image_nf.gif"; // Default image to be displayed on error
var setDefaultErrTxt="Image Not Found"; // Default text to be displayed on error
imagesArr = document.getElementsByTagName("img");
for(var i=0; i<imagesArr.length; i++)
{
if(!imagesArr[0].getAttribute("nc")=="1")
{
var tempImgAttrib=imagesArr[i].getAttribute("alt");
imagesArr[i].setAttribute("alt","");
if(imagesArr[i].width=="28" && imagesArr[i].height=="30")
{
imagesArr[i].src=setDefaultErrImg;
imagesArr[i].setAttribute("alt",setDefaultErrTxt);
}
else
{
imagesArr[i].setAttribute("alt",tempImgAttrib);
}
}
}
}
}

window.onload=checkImages;
</script>


When you use the script you will require your custom image (image_nf.gif, here)

:thumbsup:

[joh6nn]

it's a good idea, but it's a bad way of going about it, i think, because it limits it only to IE, and only to images that haven't had their size attributes set, or don't have alt tags.

Image objects have an onerror event handler, which means you could simply loop through all the images in a document, and set their onerror handlers to a particular function.

eg:

for (var i = 0; i < document.images.length; i++;) {
document.images[i].onerror = function() {
this.src = './path/to/picture.gif';
}


the problem with that is, if you put that into a window.onload event handler, then all of the images will already have been loaded, and it will have no effect. also, simply putting it in the head of the page, will lead to problems, because none of the pictures have been defined yet.

so how do you solve this problem?

well, actually the answer (or, the answer that i've come up with anyway), is part of another problem.

looping through every image on the page could possibly cause problems, if the particular image that can't be found, is in some way important to lay out. Spacers in tables, for example. You probably don't really want every image on the page to have this error handler. so, the answer seems to be singling out the most important pictures on a page, and giving them the error handler.

Definitely not the best solution, but a workable one.