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

Incredible Demos

  • By
    Create an Animated Sliding Button Using MooTools

    Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a...

  • By
    Digg-Style Dynamic Share Widget Using MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

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!