jquery - 在 JQuery 中处理丢失的图像

Question

在 JQuery 中，以前可以使用 fn.error() 处理丢失的图像

var photo = $('#photo');
photo.find('.photo-wrapper')
    .error(function() { $(this).attr('src' , '/images/nosuchphoto.png'); })
    .attr( 'src', '/images/photoserver/photo.png' );

但这在 JQuery 1.8 中已被弃用。

现在 1.9 已经发布，处理丢失图像的最佳方法是什么？

Answer 1

改为使用on("error")。

var photo = $('#photo');
photo.find('.photo-wrapper')
    .on('error', function() { $(this).attr('src' , '/images/nosuchphoto.png'); })
    .attr( 'src', '/images/photoserver/photo.png' );

Answer 2

对于可能存在的图像，我发现最优雅的解决方案是使用 $ajax，例如：

$.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*/
    } 
});

但是有些人喜欢使用加载后显示自己的隐藏图像，例如：

<img src="your_image.jpg" onload="loadImage()">

两种解决方案都有效，使用最适合您问题的解决方案