Better Broken Image Handling
Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead you may want to replace that with a "missing image" graphic that you are sure exists so there is better visual feedback that something is wrong. Or, you might want to hide it entirely. This is possible, because images that a browser can't find fire off an "error" JavaScript event we can watch for.
// Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
// Or, hide them
$("img").error(function(){
$(this).hide();
});Additionally, you may wish to trigger some kind of Ajax action to send an email to a site admin when this occurs.
While this is neat and I didn’t know that imgs threw an error if they can’t be loaded, the usefulness of such a block seems low and somewhat heavy (attaching an event-listener to every img on a page) for something that shouldn’t occur very often.
I could see this being useful in a case where UGC is being created and the user uploads an image, you could try to display the image if its been processed by the server and if not show a placeholder.
Hi,
This is chandru from Chennai(india)…
You hava a amazing site Every works is useful for me,
keep it up dude…
I really want to implement this on my site, but some of the images are rendered via a PHP script, and this bit of code hides those images for some reason. Can anyone help me out? I don’t like that ugly little icon showing up. I have a image sitting behind where the rendered image should be in case it cannot render it because it is trying to pull down a Minecraft skin and if a user did not upload one the default is not rendered.
Oops, never mind. Works now. Just played around a bit and got it.
Saddly, this does not work in IE – even through IE 9.
Great!! solved my error :)
no it did not on the second glance :((
I am getting missing image icons on my menu hover how can i deal with it??
in chrome (forgot to mention)
Hi !!!!
I dont your name ….
But this site is very helpful for me ….
if you put “try yourself” for your code , it is better for user
Hi all, i cant seem to get this to work. What should the code look like and do i place it before the head or the cose of the body
I was doing something similar to this, but then I found this is a bad choice.
Broken images are not always caused by invalid url or file-not-exist, it could be caused by temporary network problem or slow connection.
By changing image src of a broken image, users won’t get a chance to see what the real scr is (right click – view image info). It’s even worse to hide the broken image because it’s totally invisible.
So my solution is to leave the browser broken image alone, and add a reload-image click event to the image.
For some browsers, you might need to specify dimensions and a border
.broken-image {width: 16px !important; height: 16px !important; border: 1px solid #aaa;}, otherwise the image will be invisible. And remove the class on image load.I don’t have any idea where to paste this code,
Can you please show me more detail?
$(document).ready(function() {
$(“img”).error(function() {
$(this).hide();
});
});
…and then it waits for the site to load entirely and hides imgs afterwards.
Might cause flickering but surely hides all that needs to be hidden.
Alright, why doesn’t it render markdown codeblocks?