Javascript Detect Broken Image

Posted by tech on

May 26, 2008

We have no way to know if an image is broken or not especially if we are just hot linking it from some other site. Javascript’s onerror function just does that. To add a no-image-file as replacement instead of the broken image icon (which would make your site look unprofessional), use this function below.

^?View Code JAVASCRIPT

function onImgError(source) {
  source.src = "no-image-125px.gif";
  // disable onerror to prevent endless loop
  source.onerror = "";
  return true;
}

and call it using this <img src="test.gif" onerror="onImgError(this)"/>

tip from: http://www.tech-evangelist.com/2007/09/15/missing-image-fix/

Found this post useful? Buy me a cup of coffee or help support the sponsors on the right.

(4 votes, average: 5.00 out of 5)

Loading ...

tags: detect broken image, javascript

7 Responses to “Javascript Detect Broken Image”

Pages: [1] 2 » Show All

1
analyzediz Says:
December 15th, 2008 at 10:54 am
Great tip!

Worked like a charm. I updated the method to take in the desired replacement image URL.

Thanks again.
2
Satya Says:
March 19th, 2009 at 5:26 am
Great tip!

Amazed at the smoothness
3
tech Says:
March 19th, 2009 at 7:03 am
yer welcome . whatever problems you have with javascript, you let me know.
4
binarystarr Says:
July 23rd, 2009 at 2:50 am
Thats excellent, such an elegant solution. Many thanks.
5
tech Says:
July 23rd, 2009 at 2:54 am
thanks