O'Reilly

Use Custom Missing Image Graphics Using jQuery

By on  

Yesterday I posted an article about how you can use your own "missing image" graphics when an image fails to load using MooTools. Here's how to do the same using jQuery.

The jQuery JavaScript

$(document).ready(function() {
	/* version 1 */
	$('img.missing1').error(function() {
		$(this).attr({
			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 */
	$('img.missing2').error(function() {
		$(this).attr({
			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;'
		});
	});
});

Note that I've provided two examples. If you want to get really specific, you can create multiple images and account for different sizes when possible.

A great website accounts for all of the details. This is yet another way of accounting for the finest of details. A website is NEVER complete!

Track.js Error Reporting

Recent Features

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • 5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

  • Introducing MooTools LazyLoad

    Once concept I'm very fond of is lazy loading. Lazy loading defers the loading of resources (usually images) until they are needed. Why load stuff you never need if you can prevent it, right? I've created LazyLoad, a customizable MooTools plugin that...

Discussion

  1. Interesting :)

    There’s just one thing -> you wrote (The MooTools Javascript)

    Guess it should be ( The jQuery Javascript )

    MooTools runs in your blood man :D

  2. Oooooooops. Fixed.

    But MooTools DOES run in my blood! :)

  3. Rakesh Juyal

    So we can “Use Custom Missing Image Graphics using JQuery or MooTools”. :)

  4. Good job
    umm….attr

    $(this).attr({
             src: 'http://davidwalsh.name/dw-content/missing-image.jpg',
               alt: 'Sorry!  This image is not available!',
               title: 'Sorry!  This image is not available!',
              style:'border: 1px solid #f00;width:110px;height:40px;'
           });
    

    Support for firefox :P

  5. Erik

    Do you know if it’s possible to use the .live function to bind this behavior?
    That would enable invalid dynamic images that are injected after the document.ready event to also have the same behavior..

    Besides that, thanks for a brilliant snippet..

    Cheers,

    Erik

  6. Bassem

    But This means i have to give a “.missing” class to all images in my page ! ?? its not just a detection for the broken link

  7. @Bassem: You could automate giving that class to all of the images using jQuery.

  8. Tilal Husain

    I usually use jquery’s builtin function and it works perfectly

    $("img").error(function () {
      $(this).unbind("error").attr("src", "images/noimage.jpg");
    });
    
  9. Hi I’m using this plugin and it’s working very well except for one problem. It seems to be interfering with the jQuery ui dialog feature. When I include $.idleTimer(120000) in my script firebug shows a ‘too much recursion’ error when I attempt to close an open modal dialog. When I remove that line of code it works fine. Any ideas? Thanks in advance

  10. rp

    Very cool. Just what I needed. Thanks!!!!!!!!!!!!!!!!!!!!

  11. Shaun Gilroy

    There’s one small problem here. There’s no guarantee that the image will load after jQuery registers events. If the image loads first, this code won’t work. This is especially likely on image-heavy pages.

    There is a workaround, though: add your error handler to the load event and explicitly reassign the image src. This makes sure the error handler has been registered before the image loads.

    For example:

    $('img').each(function() {
      $(this).error(function() {
        $(this).attr({
          src: 'http://davidwalsh.name/dw-content/missing-image.jpg',
          alt: 'Sorry!  This image is still caching!',
          style:'border: 1px solid #f00;width:110px;height:40px;'
        });
      });
    
      this.src = this.src;
    });
    

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

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...