Remove Broken Images Using MooTools or jQuery
A while back I wrote a post called Send Email Notifications for Broken Images Using MooTools AJAX. Looking back on that post, I failed to address the image itself. After some thought I've decided it would be best to remove the broken image from the page all together. Below you'll find how to do so using MooTools or jQuery.
The MooTools JavaScript
$$('img').addEvent('error',function() {
this.dispose();
});
The MooTools way of removing elements from the page is Element.dispose().
The jQuery JavaScript
$('img').error(function() {
$(this).remove();
});
The jQuery way of removing elements from the page is jQuery.remove().
Removing a broken image is a great way of preventing the user from seeing a shortcoming in your website.
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![Add Styles to Console Statements]()
I was recently checking out Google Plus because they implement some awesome effects. I opened the console and same the following message:
WARNING!
Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS.
Do not enter or paste code that you...
![JavaScript Battery API]()
Mozilla Aurora 11 was recently released with a bevy of new features. One of those great new features is their initial implementation of the Battery Status API. This simple API provides you information about the battery's current charge level, its...
This trick does not seem to work on IE7, at least not for me.
I love it! Thanks!
Neat simple trick. The only thing i would argue, and this really comes down to everyones individual situation, is that instead of removing the image, I would replace it with a default/error image.
Looking for this – thank you
nunage.com
is ALL broken image. You will notice it on the first page.
.
To avoid broken images in wordpress I suggest using the Hot Linked Image Cacher plugin which will cache all hotlinked images in your uploads folder and relink the images to the original source. I run this every couple of posts to keep from having broken images in the first place.
@Anton: Funny you should mention that:
MooTools – http://davidwalsh.name/custom-missing-image
jQuery – http://davidwalsh.name/custom-missing-image-jquery
jeah – nice, i like the custom-image thing better but thats fine too.
but maybe with a big rich DOM this could be stressing for the browser (especially shitty ones like IEs)?
@David Walsh: I really like this :)
Instead of remove it , i’ll replace it with a default / error images :)
Would you recommend waiting to use the script until after the dom is ready?