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

Question

In the site that I'm working on, the image displayed is not always (displayed) because the link could be bad or stale (or whatever). You can see it here: Why is my dynamic HTML seemingly randomly placed?

When that happens, I want to be able to show an "Image Unavailable" message where the image would be. Is that 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 (pseudocode):

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

?

UPDATE

Okay, so the code should be like:

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 cause each image, as it's added, to have that error handler attached to it, so that there are N event handlers bound, one for each image?

Or should it 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 doesn't 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 don't know why...

Is this image located on the same domain as the code that will be determining its existence? — Aaron J Spetner, Jul 17 '13 at 14:14
Take a look: http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery — Felipe Oriani, Jul 17 '13 at 14:14
Check this out http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images — Vishnu Sureshkumar, Jul 17 '13 at 14:14
Wouldn't it be better to use a crawler to go through your site and inform you of missing content? Content is more likely to be non-existant due to permanent removal rather than temporarily unavailable. — cimmanon, Jul 17 '13 at 14:21

score 6 · Accepted Answer · answered Jul 17 '13 at 14:15

6

Sure is, the error() method :

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

The error event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.

answered Jul 17 '13 at 14:15

adeneo

312,895
29
395
388

Can I add this to the function that dynamically generates the HTML, or does it have to be in the "ready" function? If the latter, does the "$(this)" portion have to change? – B. Clay Shannon-B. Crow Raven Jul 17 '13 at 14:28
As long as the element is available (in the DOM) you can use it like any other handler. `this` refers to the image inside the function, how you use it is up to you I guess ? – adeneo Jul 17 '13 at 14:32
It's not working for me; the area remains blank. I've got it in the ready function, above the getJSON() code. – B. Clay Shannon-B. Crow Raven Jul 18 '13 at 23:24
What getJSON code? If the image are inserted dynamically, you would have to attach the error handler to them after or while they are inserted. – adeneo Jul 18 '13 at 23:44

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

UPDATE

UPDATE 2

1 Answers1

Linked