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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

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!