jQuery/Javascript to replace broken images

Question

I have a web page that includes a bunch of images. Sometimes the image isn't available so a broken image is displayed in the clients browser.

How do I use jQuery to get the set of images, filter it to broken images then replace the src?

--I thought it would be easier to do this with Jquery, but It turned out much easier to just use a pure javascript solution. i.e the one provided by Prestaul

Answer 1

Basically you want to handle the onError event for the image to reassign the source. This can be done without jQuery:

function ImgError(source){
    source.src = "/images/noimage.gif";
    source.onerror = "";
    return true;
}

<img src="someimage.png" onerror="ImgError(this);"/>

Answer 2

I believe this is what you're after: jQuery.Preload

Here's the example code from the demo, you specify the loading and not found images and you're all set:

$('#images img').preload({
    placeholder:'placeholder.jpg',
    notFound:'notfound.jpg'
});

Answer 3

Not sure if there is a better way, but I can think of a hack to get it - you could ajax post to the img url, and parse the response to see if the image actually came back. If it came back as a 404 or something, then swap out the img. Though i expect this to be quite slow.

Answer 4

I don't know jQuery yet, so my answer will be generic (and the result of a quick search...). I found the page Detecting broken images with JavaScript (via a DZone Snippet, but I better give the original source!) which gives a simple and apparently relatively cross-browser (to test on Opera/Safari) method.

Of course, it would be better to serve a non-broken page, no? Although to be honest it can be a connection issue to.

Answer 5

Here is a standalone solution:

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

Answer 6

I use the built in error handler:

$("img").error(function () {
  $(this).unbind("error").attr("src", "broken.gif");
});

Answer 7

$(window).bind('load', function() {
$('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 ) 
        || this.readyState == 'uninitialized' ) {
        $(this).attr('src', 'missing.jpg');
    }
}); })

Source: http://www.insideria.com/2009/03/jquery-quickie---broken-images.html