Is there a way to programmatically determine that an image link is bad?

Question

On the site I'm working on, the displayed image is not always (displayed) because the link may be poor or outdated (or any other). You can see it here: Why does my dynamic HTML seem to be randomly placed?

When this happens, I want to show the message "Image Unavailable" in which the image will be. Is it possible? If so, two things are needed:

1) To be able to determine programmatically that the image is not being displayed 2) To replace it, in that case, with aforementioned message 

Perhaps something like (pseudo-code):

 if (ImageMissing) { $('img').Attr('src', 'imageMissing.png'); } 

?

UPDATE

Ok, so the code should look like this:

 function doSomething() { var htmlBuilder = ''; $.getJSON('duckbills.json', function() { // each ... // process the json file, building dynamic html htmlBuilder += 'img="bla.png"...'; $('img').error(function() { $(this).attr("src", "imageMissing.png"); }); }): }): 

???

Does this mean that each image as it is added is associated with this error handler in order to link the N event handlers, one for each image?

Or it should be:

 function doSomething() { var htmlBuilder = ''; $.getJSON('duckbills.json', function() { // each ... // process the json file, building dynamic html htmlBuilder += 'img="bla.png"...'; }): $('img').error(function() { $(this).attr("src", "imageMissing.png"); }); }): 

???

UPDATE 2

This is my code and it does not work:

 $.getJSON('Content/NBCCJr.json', function (data) { $.each(data, function (i, dataPoint) { if (IsYear(dataPoint.category)) { htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>'; } else { htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' + dataPoint.imghref + '\"' + ' target=\"_blank\"><img height=\"160\" width=\"107\" src=\"' + dataPoint.imgsrc + '\"' + dataPoint.imgalt + '></img></a>' + '<div id=\"prizeCategory\" class=\"category\">' + dataPoint.category + '</div><br/><cite id=\"prizeTitle\" >' + dataPoint.title + '</cite><br/><div id=\"prizeArtist\" class=\"author\">' + dataPoint.author + '</div><br/>'; if (dataPoint.kindle.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.kindle) + '\"' + ' target=\"_blank\">Kindle</a></button>'; } if (dataPoint.hardbound.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.hardbound) + '\"' + ' target=\"_blank\">Hardbound</a></button>'; } if (dataPoint.paperback.trim().length > 2) { htmlBuilder += '<button><a href=\"' + Urlize(dataPoint.paperback) + '\"' + ' target=\"_blank\">Paperback</a></button>'; } htmlBuilder += '</section>'; // Doesn't work $('img').error(function () { $(this).attr("src", "Content/NoImageAvailable.png"); }); } }); //each 

... and I do not know why...

Answer 1

Of course, the error () method:

 $('img').error(function() { $(this).attr("src", "imageMissing.png"); }); 

An error event is dispatched to elements, such as images that link to a document and are loaded by the browser. It is called if the item was loaded incorrectly.