Friday, October 12, 2007

Detecting Broken Images with Javascript

An awesome link to determine whether the image is broken within the page. The following is exact copy from the link in the References below. Please refer to the link below.


<script language="javascript">
<!--
window.onload = function() {
for (var i = 0; i < document.images.length; i++) {
if (!IsImageOk(document.images[i])) {
document.images[i].style.visibility = "hidden";
}
}
};

function IsImageOk(img) {
// During the onload event, IE correctly identifies any images that
// weren't downloaded as not complete. Others should too. Gecko-based
// browsers act like NS4 in that they report this incorrectly.
if (!img.complete) {
return false;
}
// However, they do have two very useful properties: naturalWidth and
// naturalHeight. These give the true size of the image. If it failed
// to load, either of these should be zero.
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
return false;
}
// No other way of checking: assume it's ok.
return true;
}


//-->
</script>

(If you feel that an exact copy of the code in this blog violates your rights, please tell me and I will take this code down. The link below will still remain. Thanks!)

References:
http://talideon.com/weblog/2005/02/detecting-broken-images-js.cfm

1 comment:

Keith Gaughan said...

Don't worry, I don't mind at all so long you hat-tip the original source, which you have. Happy you found it useful.