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（）。在新映像的加载或错误中，承诺被解决或被拒绝。

然后有一串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';           
        });

});

级联jQuery图像后备

2 个答案: