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: 'https://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: 'https://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.

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

Incredible Demos

Discussion

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