In JQuery it was previously possible to handle missing images using fn.error()
var photo = $('#photo');
photo.find('.photo-wrapper')
.error(function() { $(this).attr('src' , '/images/nosuchphoto.png'); })
.attr( 'src', '/images/photoserver/photo.png' );
but this has been deprecated in JQuery 1.8.
Now that 1.9 is out, what is the best way to handle missing images?
Use on("error") instead.
var photo = $('#photo');
photo.find('.photo-wrapper')
.on('error', function() { $(this).attr('src' , '/images/nosuchphoto.png'); })
.attr( 'src', '/images/photoserver/photo.png' );
For images that might exist i find most elegant solution is useing $ajax, like:
$.ajax({
url: 'your_image.jpg',
type: "POST",
dataType: "image",
success: function() {
/* function if image exists (setting it in div or smthg.)*/
},
error: function(){
/* function if image doesn't exist like hideing div*/
}
});
But some people like useing hiden images that show themselves after load like:
<img src="your_image.jpg" onload="loadImage()">
Both solutions are efective, use one that suits your problem best
