javascript - 级联 jQuery 图像回退
问题描述
我正在寻找动态加载图像:
<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
解决方案
每次都可以使用 Promise 和 new Image()。承诺在新图像的 onload 或 onerror 中得到解决或拒绝。
然后有一系列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';
});
});
推荐阅读
- lets-encrypt - 在 Lighttpd 中对多个域使用 Letsencrypt
- flutter - vs 代码未与 AVD 仿真器集成
- java - 排序 ArrayList 以按特定字符串重新排列
- excel - CALCULATE 函数中的 USERELATIONSHIP 返回错误结果
- python - 为什么我的时间 x 轴变成数字而不是年份?多个数据点的热图/二维直方图
- reactjs - 从数据库中检索图像 url 并使用 Material-UI 在 React 中显示
- c++ - 尝试使用模将数组旋转 k 位
- python - PyInstaller Flask Chrome 图标
- java - 在 Java 11 和现代 iMac 上使用 Swing Java2D
- java - 为什么 flatMap 不平整 Stream
> 到 SomeClass 而不是 Stream ?