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
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Create a Sexy Persistent Header with Opacity Using MooTools or jQuery

    I've been working with the Magento eCommerce solution a lot lately and I've taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the...

  • By
    Web Audio API

    The Web Audio API allows developers to load and decode audio on demand using JavaScript.  The more I evaluate awesome games for Firefox OS TVs, the more I get to learn about these APIs that I normally wouldn't touch.  The following is a very basic introduction to the WebAudio API...

Discussion

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