如果存在则附加 img

Question

为了不使 html 文件太重，并且为了简单快速地阅读 porpuses，我想“动态”创建 img 元素，但前提是它们存在于服务器中，这就是我所期望的结果，所以我在这里尝试了两种解决方案：Question
error() mehode 的解决方案不起作用：Demo
控制台说$(...).error不是函数，我不知道为什么
我尝试使用标志

$('ul').each(function() {
  for (i = 2; i < 10; i++) {
    var flag = true
    image = new Image()
    image.src = $(this).find('img').attr('src').replace(/\d/, i)
    $(image).error(function() {
      flag = false
    })
    if (flag /*or i can just write: flag==true*/ ) {
      //do nothing
    } else {
      $(this).append('<li>' + $(image) + '</li>')
    }
    //or just => flag ? return : $(this).append('<li>' + $(image) + '</li>')
  }
})

但它不适用于我尝试的所有选项 我也尝试不使用.error() 而只使用if(image.width!=0) 或if($(image).width()!=0) 但它们都不起作用，当我尝试在控制台中获取宽度时，它显示为0（对于第一个选项）或未定义

Ajax 的第二种解决方案也不起作用：Demo
我不知道 success 是否是正确使用的参数，我检查了 jquery 网站中的文档，这是唯一对我有意义的参数
我觉得我做错了很多，请指导我 提前致谢

Answer 1

jQuery 并没有真正的.error() 方法（在 1.8 中已弃用），它是原生的 image.onerror，但如果你使用 $(image).on('error', function() {...，jQuery 将支持它。 p>

但为什么不改用image.onload 事件

$('ul').each(function(index, elem) {
    for (var i = 2; i < 10; i++) {
        (function(image) {

             image.onload = function() { // image loaded successfully
                 $(elem).append( $('<li />').append(image) );
             }

             image.src = $(elem).find('img').attr('src').replace(/\d/, i);
        })(new Image());
    }
});

Answer 2

你需要使用onerror，例如：

function checkImage(src, good, bad) {
  var img = new Image();
  img.onload = good;
  img.onerror = bad;
  img.src = src;
}


var imageExist = "http://jsfiddle.net/img/logo.png";
var imageNotExist = "foo.gif";

checkImage(imageExist, function() {
  alert(this.src + " " + "good");
}, function() {
  alert("bad");
});

checkImage(imageNotExist, function() {
  alert("good");
}, function() {
  alert(this.src + " " + "bad");
});