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.


<p><img src="" alt="Missing 1" class="missing1" /></p>
<p><img src="" 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() {
			src: '',
			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() {
			src: '',
			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.

Track.js Error Reporting

Upcoming Events

Recent Features

Incredible Demos

  • Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

  • CSS Fixed Position Background Image

    Backgrounds have become an integral part of creating a web 2.0-esque website since gradients have become all the rage. If you think gradient backgrounds are too cliche, maybe a fixed position background would work for you? It does provide a neat inherent effect by...


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