级联 jQuery 图像回退答案

【问题标题】：Cascading jQuery Image Fallback级联 jQuery 图像回退
【发布时间】：2019-01-14 18:31:42
【问题描述】：

我正在寻找动态加载图像：

<img data-src="test01">

然后使用 jQuery 获取 data-src，然后加载与该名称关联的图像，加上扩展名。如果该扩展失败，则继续进行下一个扩展，依此类推，直到我加载默认图像时到达底部。但是我不知道如何在我设置图像的attr 一次后检查是否有错误。这是我到目前为止的循环，我得到“.error not a function”

$("img").each(function(){
     var newSource = $(this).data('src').toString();
     $(this).attr('src', 'images/'+newSource+'.gif').error(function(){
            $(this).attr('src', 'images/'+newSource+'.jpg').error(function(){
                $(this).attr('src', 'images/'+newSource+'.png').error(function(){
                    $(this).attr('src', 'images/default.jpg');
                });
            });
        });
});

我这样做的原因是因为我们有一个只保存图片标题的数据库，但是，多年来，不同的人向网站上传了不同的图片格式，我们希望能够加载所有这些都在页面上，无扩展名，然后遍历每个扩展名，直到找到存在的文件，如果不存在，则默认为预设的硬编码图像 URL

【问题讨论】：

因为我们想在前端做这个。
再次，我们希望在前端执行此操作。我不知道保存这些图像的数据库有多复杂。如果您的建议可行，我相信我们的后端开发人员会首先提出建议。
与其反复更改 src，不如像对图像的快速 HEAD ajax 请求那样执行。如果您没有收到 404 或其他错误代码，则您知道该 url 有效，然后然后更改 src。
@Taplar 请提交您的建议作为示例的答案。

标签： javascript jquery image src onerror

【解决方案1】：

另一种方法是对 URL 进行 HEAD 请求。 HEAD 请求的一个好处是它只是尝试获取端点的标头，而不尝试返回数据，因此它可以非常快。在您的情况下，可以快速检查图片网址是否有效。

function changeTheSrcIfTheUrlIsValid ( element, url ) {
  return $.ajax({
    url: url,
    type: 'HEAD',
    success: function(){
      //got a success response, set the src
      element.src = url;
    }
  });
}

$("img").each(function(){
  var img = this;
  var newSource = img.getAttribute('src');
  
  //check for a gif
  changeTheSrcIfTheUrlIsValid( img, 'images/'+ newSource +'.gif' )
    .then(null, function(){
      //error handler, try jpg next
      changeTheSrcIfTheUrlIsValid( img, 'images/'+ newSource +'.jpg' )
        .then(null, function(){
          //error handler, try png next
          changeTheSrcIfTheUrlIsValid( img, 'images/'+ newSource +'.png' )
            .then(null, function(){
              //error handler, use default
              img.src = 'images/default.jpg';
            });
        });
    });
});

【讨论】：

【解决方案2】：

每次都可以使用 Promise 和 new Image()。在新图像的 onload 或 onerror 中，promise 得到解决或拒绝。

然后有catch()链尝试各种扩展，最后设置默认noImageUrl，如果一切都失败了

类似：

function setImageSrc(src, ext, el){
   return new Promise(resolve, reject){
       var url = 'images/'+src+ ext;
       var img = new Image()
       img.src = url
       img.onerror = reject;
       img.onload = function(){
           el.src = url; // set src of current element in dom
           resolve(url)
       }
   }  
}



$("img").each(function(){
     var newSource = $(this).data('src').toString();
     var self = this
     setImageSrc(newSource, '.jpg', self)
        .catch(setImageSrc(newSource, '.png', self))
        .catch(setImageSrc(newSource, '.gif', self))
        .catch(function(){
            self.src = 'noImageUrl';           
        });

});

【讨论】：