O'Reilly

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.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • Duplicate the jQuery Homepage Tooltips Using MooTools

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using MooTools. The XHTML The above XHTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

  • Select Dropdowns, MooTools, and CSS Print

    I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating...

Discussion

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

    Recently on David Walsh Blog

    • Prevent Chrome from Translating a Page

      A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

    • Create Any Type Of Website With These Multi-Purpose Themes

      We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

    • An Introduction to Static Site Generators

      Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

    • Automated Tests for Visual Responsive Layouts

      Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

    • Getting Dicey With Flexbox

      What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...