Remove Broken Images Using Dojo

By  on  

In an effort to get better with the Dojo Toolkit, I've decided to port yet another one of my previous posts: Remove Broken Images Using MooTools or jQuery. Broken images are an eyesore to any website so there's no point to keeping them in the page. Here's how you can remove them on the client side.

The Dojo JavaScript

dojo.ready(function() {
	dojo.query('img').forEach(function(img){
		dojo.connect(img,'onerror',function() {
			dojo.destroy(img);
		});
	});
});

Just as simple as jQuery and MooTools -- just a different syntax!

Recent Features

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • By
    pointer Media Query

    As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become.  In order to write good CSS, we need some indicator about device capabilities.  We've used CSS media queries thus far, with checks for max-width and pixel ratios.

  • By
    Spyjax:  Ajax For Evil Using Dojo

    The idea of Spyjax is nothing new. In pasts posts I've covered how you can spy on your user's history with both MooTools and jQuery. Today we'll cover how to check user history using the Dojo Toolkit. The HTML For the sake of this...

Discussion

  1. Some streamlining of your methods:

    dojo.query('img').connect('onerror', function() { dojo.destroy(this); });
    

    Nice site by the way :) Keep up the Dojo posts :)

  2. @Karl Tiedt: Applied to a collection — very nice! I’ll keep that in mind from this point forward.

  3. Robert Labbe

    Would you happen to have code to do this with prototype?

  4. Ben

    I wish images would fire an event if they didn’t load then we could put something in it’s place instead of going through every image checking. Kind of slow…

  5. @Ben: They do — they fire an onError event.

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