Treehouse

Use Custom Missing Image Graphics Using Dojo

By on  

A few months back I posted an article about how you can use your own “missing image” graphics when an image fails to load using MooTools and jQuery. Here’s how to do the same using Dojo.

The HTML

<p><img src="http://cnn.com/image-that-doesnt-exist.jpg" alt="Missing 1" class="missing1" /></p>
<p><img src="http://cnn.com/demo/image-that-doesnt-exist-2.jpg" alt="Missing 2" class="missing2" /></p>

We'll delegate the image to display by class -- be sure to give the appropriate class to each image. We'll be using two images for the sake of this demo.

The Dojo JavaScript

dojo.addOnLoad(function() {
	/* version 1 */
	dojo.query('img.missing1').connect('onerror',function() {
		dojo.attr(this,{
			src: 'http://davidwalsh.name/demo/missing-image.jpg',
			alt: 'Sorry!  This image is not available!',
			style:'border: 1px solid #f00;width:110px;height:40px;'
		});
	});
	/* version 2 */
	dojo.query('img.missing2').connect('onerror',function() {
		dojo.attr(this,{
			src: 'http://davidwalsh.name/demo/missing-image-2.jpg',
			alt: 'Sorry!  This image is not available!',
			style:'border: 1px solid #f00;width:30px;height:28px;'
		});
	});
});

We query the DOM for both classes and replace any broken images (we can tell there ways a problem because the onError event fires) with the two designated images. Simple!

Of course you should always do what you can on the server side to prevent broken images -- the small javascript snippet above should be used as a safeguard.

ydkjs-6.png

Recent Features

Incredible Demos

  • Use Custom Missing Image Graphics Using&nbsp;Dojo

    A few months back I posted an article about how you can use your own “missing image” graphics when an image fails to load using MooTools and jQuery. Here’s how to do the same using Dojo. The HTML We'll delegate the image to display by class...

  • Event Delegation with&nbsp;MooTools

    Events play a huge role in JavaScript. I can't name one website I've created in the past two years that hasn't used JavaScript event handling on some level. Ask yourself: how often do I inject elements into the DOM and not add an...

Discussion

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