js判断图片的网络地址是否有效

本文主要是介绍js判断图片的网络地址是否有效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

判断图片的网络地址是否有效

方法：利用 HTML DOM Image 对象

Image 对象提供了两个事件，分别是：onerror & onload。

用法如下：

// new Image对象
const IMG = new Image();
// 设置路径
IMG.src = yourImgPath;
// 当图像装载完毕时调用的事件句柄
IMG.onload = ()=>{console.log('load事件加载')；
}
// 在装载图像的过程中发生错误时调用的事件句柄
IMG.onerror = ()=>{console.log('error事件加载')；
}

举例说明：

现在有一个网络地址图片，判断地址是否可用，如果可用，则把地址赋给 loadImg 变量，否则把 assets/image/no.jpg 这个本地路径赋值给 loading 变量。

let loading: string;
// 图片地址
const url = 'https://profile.csdnimg.cn/2/1/8/3_s_y_w123';const IMG = new Image();
IMG.src = url;IMG.onload = ()=>{loading = url;
}
IMG.onerror = ()=>{loading = 'assets/image/no.jpg';
}

上面的方法其实和使用ajax请求一下图片地址，然后判断返回状态的方法，二者本质是一样的，都是通过网络请求的返回状态来判断的。

不过区别就是，一个是ajax，一个是使用的Image对象。
当然这两者还有一个共同点，就是不可避免的都会造成异步问题。
关于请求造成的异步，相信大家有自己的解决办法，比如使用 promise 或者发布订阅机制。

对于单独的某一张图片都好解决，但是不确定张数呢？我这里提出一个我面临的问题：

有一个图片数组，当我遍历这个数组取出图片路径，然后调用图片路径判断方法之后。

如何知道所有发生错误的图片都已经判断完成,或者说怎么知道所有发生错误的图片中最后一张错误判断onerror执行完成了。
const imgArr = [...];
imgArr.forEach(item=>{const IMG = new Image();IMG.src = item;IMG.onerror = () => {console.log('图片发生错误');# 如何知道本次执行的是最后一张发生错误的图片}
});
当然，我们可以设置一个全局变量 count = 1；无论图片加载成功或失败都让count++，然后判断 count 是否和图片数组的length相等即可。
但是这样势必要走完所有图片地址才知道结果，有没有更加高效的呢？