Comments on: Use Custom Missing Image Graphics Using jQuery http://davidwalsh.name/custom-missing-image-jquery Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞. Thu, 09 Feb 2012 14:25:32 +0000 hourly 1 http://wordpress.org/?v=3.3 By: Shaun Gilroyhttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-27253 Shaun Gilroy Fri, 14 Oct 2011 23:04:31 +0000 http://davidwalsh.name/?p=1920#comment-27253 That code turned out unreadable. Let me try this again:<code>$('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; });</code> 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;
});

]]> By: Shaun Gilroyhttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-27252 Shaun Gilroy Fri, 14 Oct 2011 22:59:59 +0000 http://davidwalsh.name/?p=1920#comment-27252 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: <code> $('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; }); </code> 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;
});

]]> By: rphttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-16177 rp Fri, 19 Feb 2010 17:49:53 +0000 http://davidwalsh.name/?p=1920#comment-16177 Very cool. Just what I needed. Thanks!!!!!!!!!!!!!!!!!!!! Very cool. Just what I needed. Thanks!!!!!!!!!!!!!!!!!!!!

]]> By: ZK@Web Marketing Bloghttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-9947 ZK@Web Marketing Blog Sat, 20 Jun 2009 16:45:29 +0000 http://davidwalsh.name/?p=1920#comment-9947 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 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

]]> By: Tilal Husainhttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-9747 Tilal Husain Fri, 12 Jun 2009 14:56:06 +0000 http://davidwalsh.name/?p=1920#comment-9747 I usually use jquery's builtin function and it works perfectly$("img").error(function () { $(this).unbind("error").attr("src", "images/noimage.jpg"); }); I usually use jquery’s builtin function and it works perfectly

$(“img”).error(function () {
$(this).unbind(“error”).attr(“src”, “images/noimage.jpg”);
});

]]> By: David Walshhttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-9133 David Walsh Thu, 07 May 2009 12:26:35 +0000 http://davidwalsh.name/?p=1920#comment-9133 <p>@Bassem: You could automate giving that class to all of the images using jQuery.</p> @Bassem: You could automate giving that class to all of the images using jQuery.

]]> By: Bassemhttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-9129 Bassem Thu, 07 May 2009 09:43:57 +0000 http://davidwalsh.name/?p=1920#comment-9129 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 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

]]> By: Erikhttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-8744 Erik Thu, 16 Apr 2009 10:43:06 +0000 http://davidwalsh.name/?p=1920#comment-8744 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 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

]]> By: Jhon Doehttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-8563 Jhon Doe Mon, 06 Apr 2009 12:50:09 +0000 http://davidwalsh.name/?p=1920#comment-8563 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 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

]]> By: Rakesh Juyalhttp://davidwalsh.name/custom-missing-image-jquery/comment-page-1#comment-8539 Rakesh Juyal Fri, 03 Apr 2009 13:55:06 +0000 http://davidwalsh.name/?p=1920#comment-8539 So we can "Use Custom Missing Image Graphics using JQuery or MooTools". :) So we can “Use Custom Missing Image Graphics using JQuery or MooTools”. :)

]]>