CODEWITHSUNDEEP
jqueryimage
Greg
Greg

Reputation: 1853

Handling missing images in JQuery

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?

Upvotes: 0

Views: 124

Answers (2)

Ivan Pavić
Ivan Pavić

Reputation: 538

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

Upvotes: 0

alex
alex

Reputation: 490413

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

Upvotes: 2

Related Questions