我希望动态加载图像:
<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
一种替代方法是对 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';
});
});
});
});
每次都可以使用 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';
});
});