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 handl…

Accepted Answer

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.

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

Solution

Problem

Related problems