Javascript Detect Broken Image

Posted by blogmeister 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.

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

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/

Donations appreciated. Every little $ helps. Or click Google +1.

tags: detect broken image, javascript

8 Responses to “Javascript Detect Broken Image”
Great tip!

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

Thanks again.

By analyzediz on Dec 15, 2008
Great tip!

Amazed at the smoothness

By Satya on Mar 19, 2009
yer welcome . whatever problems you have with javascript, you let me know.

By tech on Mar 19, 2009
Thats excellent, such an elegant solution. Many thanks.

By binarystarr on Jul 23, 2009
thanks

By tech on Jul 23, 2009
nice, didn’t know that existed. its built into jquery now = sweet

By chris marx on Nov 17, 2009
cool! that’s great news!

By tech on Nov 17, 2009
This is a good summary, I was wondering if I could use this piece on my website, I will link it back to your website though. If this is a problem please let me know and I will take it down right away.

By Adah Hefty on Apr 12, 2010