home

Search A2Z 24

Broken Image Handling using JQuery

X

Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead, you may want to replace that with a "missing image" graphic that you are sure exists so there is better visual feedback that something is wrong. Or, you might want to hide it entirely.

This is possible because images that a browser can't find fire off an "error" JavaScript event we can watch for.

// Replace source
$('img').on("error", function() {
  $(this).attr('src', '/images/missing.png');
});

// Or, hide them
$("img").on("error", function() {
  $(this).hide();
});

Additionally, you may wish to trigger some kind of Ajax action to send an email to a site admin when this occurs.

About Author

loading...

Share your thoughts!

Login as a member to access comment posting block !! click-here

Thoughts From Other Users (0)

No Comments

×