Email This Post
Print This Post
Broken Image Icon Replacement
Tue, Feb 3, 2009 – 4:34 pmEver create a web page to hold images that someone else provides ? What happens when they remove the image, yet not the code from the page ?
Well, you get that big red “X” missing image icon in place of the nice image that used to be there. It can make a nicely laid out page look really bad. 
What I’ve done is to create a couple of JavaScript functions that you can just place in the top of the page and forget about. Everytime the page loads it will look for those missing/broken images and replace the horrible red “X” with any image you want to take its place.
Or – you can just hide it and make the red “X” disappear.
Example: BrokenImageCheck.html
Source Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Broken Link Replacement</title>
<script>
function ImageOk(img) {
// Body has finished loading so if img is not complete then
// you have a broken image so return false - image is not ok
if (!img.complete) return false;
// if naturalWidth is undefined or zero then the image failed to load
// so return false - image is not ok
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
// Passed all checks - image succeeded in loading - image is ok
return true;
}
function BrokenImageCheck() {
// Name of image to replace broken image icon with
var replacementImg = "/images/NoPhotoOnFile.gif";
// Loop through all images in the document
for (var i = 0; i < document.images.length; i++) {
// If image did not finish loading
if (!ImageOk(document.images[i])) {
document.images[i].src = replacementImg;
// document.images[i].style.display = "none";
}
}
}
// After body loads check all images to see if the sucessfully loaded
window.onload=BrokenImageCheck;
</script>
</head>
<body>
Broken Link <img src="IdoNotExist.gif"><br>
<br>
The above link should appear with a replacement image in place of the broken image icon<br>
</body>
</html>
In the above example the file “IdoNotExist.gif” does not exist and would normally case the broken image icon (red “X”) to appear in it’s place.
What happens is that in line 35 the assignment
window.onload=BrokenImageCheck;
Causes the JavaScript function “BrokenImageCheck” to run after the web page finishes loading. BrokenImageCheck will then scan through all of the images on the web page, calling the function “ImageOk” to see if any had troubles loading. If it determines that the image did not completely load then the assignment on line 28
document.images[i].src = replacementImg; // document.images[i].style.display = "none";
will replace it with any image you wish to use in its place.
If you only want to just suppress the broken image icon from appearing then comment out the .src= assignment and uncomment the display=”none” assignment in the BrokenImageCheck function
