While most of the time you can check the images your using, either you uploaded them manually or your script will see and, if missing, replacing it with a placeholder image. Sometimes however thats not particularly practical, like when your working mostly in javascript and don’t want to make an ajax call just to see if there an image. Thats the situation I ran into yesterday, and the solution is…
|
1 2 3 |
$("img").error(function () { $(this).unbind("error").attr("src", "missing_image.gif"); }); |
Snipplr: link
Basically what thats doing is exchanging the image src with one you provide if there is an error loading it. Simple and effective (although there is a very slight delay sometimes, it’s better than I broken image though). There is a limitation with that though, since it unbinds the error trigger after it’s been fired if your changing images with javascript it’ll fail to catch a second image loading. The fix is simple, remove the unbind like this:
|
1 2 3 |
$("img").error(function () { $(this).attr("src", "missing_image.gif"); }); |
Snipplr: link
There is a problem with that though, if your missing image image is missing it will keep looping and eventually cause an overflow error. Shouldn’t be to much of a problem though, just make sure you image is somewhere it can find it. Thats it, short and simple but effective. If you have any questions post them in the comments and I’ll do what I can.