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

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!

Recent Features

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

Incredible Demos

  • By
    Multiple File Upload Input

    More often than not, I find myself wanting to upload more than one file at a time.  Having to use multiple "file" INPUT elements is annoying, slow, and inefficient.  And if I hate them, I can't imagine how annoyed my users would be.  Luckily Safari, Chrome...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

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!