Treehouse

Remove Broken Images Using MooTools or jQuery

By on  

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.

ydkjs-4.png

Recent Features

  • CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • Check All/None Checkboxes Using MooTools

    There's nothing worse than having to click every checkbox in a list. Why not allow users to click one item and every checkbox becomes checked? Here's how to do just that with MooTools 1.2. The XHTML Note the image with the ucuc ID -- that...

  • Create a Photo Stack Effect with Pure CSS Animations or MooTools

    My favorite technological piece of Google Plus is its image upload and display handling.  You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation...

Discussion

  1. This trick does not seem to work on IE7, at least not for me.

  2. Mr.X.

    I love it! Thanks!

  3. 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.

  4. Looking for this – thank you

    nunage.com

    is ALL broken image. You will notice it on the first page.
    .

  5. 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.

  6. jeah – nice, i like the custom-image thing better but thats fine too.

  7. but maybe with a big rich DOM this could be stressing for the browser (especially shitty ones like IEs)?

  8. @David Walsh: I really like this :)
    Instead of remove it , i’ll replace it with a default / error images :)

  9. Would you recommend waiting to use the script until after the dom is ready?

  10. [...] dojo, javascript چند روز پیش دیوید والش تو مطلبی با عنوان Remove Broken Images Using MooTools or jQuery نحوه حذف عکس های لود نشده با جی کوئری و موتولز نوشته که [...]

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!