Use Custom Missing Image Graphics Using jQuery

Comments

1. Ahmad Alfy

   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. David Walsh

   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. Jhon Doe

   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. David Walsh

   @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. ZK@Web Marketing Blog

   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;
});


12. Shaun Gilroy

    That code turned out unreadable. Let me try this again:

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