级联jQuery图像后备

Question

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

<img data-src="test01">

然后使用jQuery获取data-src，然后加载与该名称关联的图像以及扩展名。 如果该扩展名失败，则移至下一个扩展名，依此类推，直到我们仅加载默认图像时到达最底端。 但是，我将图像的attr设置一次之后，我不知道如何检查是否有错误。 这是我到目前为止的循环，并且我得到“ .error不是函数”

$("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

Answer 1

一种选择是对网址执行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'; }); }); }); }); 

Answer 2

可以每次使用Promise和新的Image（）。 在新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';           
        });

});