js怎样判断图片链接是否有效
前言:项目中要读取多个静态资源图片文件,已知文件路径顺序,但是不知道资源文件长短,随即想写个固定循环出路径,结果路径不存在的会报错,虽然可以通过onerror
事件解决,但终究不是明智之举;与其在知道结果后亡羊补牢,不如在创造过程中就扼杀掉不存在的路径。
- 要判断图片链接是否有效,我们首先创建一个Image对象,然后把链接设置在Image对象上,如果能正常加载,则代表链接有效。因为图片是异步加载的,所以我们需要Promise来处理。创建一个处理函数,如下代码:
function checkImgExists(imgurl) {
return new Promise(function(resolve, reject) {
var ImgObj = new Image()
ImgObj.src = imgurl
ImgObj.onload = function(res) {
resolve(res)
}
ImgObj.onerror = function(err) {
reject(err)
}
})
}
- 根据以上代码,当图片加载成功时,resolve(完成)被触发,当图片加载失败时,reject(失败)被触发。于是可以使用一下代码进行调用测试:
checkImgExists('https://test.com/dssd=0.jpg').then(()=>{
//success callback
console.log('有效链接')
}).catch(()=>{
//fail callback
console.log('无效链接')
})
- 全部代码如下:
function checkImgExists(imgurl) {
return new Promise(function(resolve, reject) {
var ImgObj = new Image();
ImgObj.src = imgurl;
ImgObj.onload = function(res) {
resolve(res);
}
ImgObj.onerror = function(err) {
reject(err)
}
})
}
checkImgExists('https://test.com/20200803115749u=2876792700,1627849181&fm=26&gp=0.jpg').then(()=>{
//success callback
console.log('有效链接')
}).catch(()=>{
//fail callback
console.log('无效链接')
})
深拷贝 – 递归
//方法
function copy(obj) {
let newobj = null // 接受拷贝的新对象
if(typeof(obj) == 'object' && typeof(obj) !== null) { // 判断是否是引用类型
newobj = obj instanceof Array? []: {} // 判断是数组还是对象
for(var i in obj) {
newobj[i] = copy(obj[i]) // 判断下一级是否还是引用类型
}
} else {
newobj = obj
}
return newobj
}
//调用
let newobj = copy(obj)