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

但是有些人喜欢使用hiden图像在加载后显示自己：

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

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

在JQuery中处理丢失的图像

2 个答案: