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

方法：利用 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相等即可。
但是这样势必要走完所有图片地址才知道结果，有没有更加高效的呢？

js判断图片的网络地址是否有效相关推荐

JS 判断图片是否是否存在--不存在则显示默认图片
1.最简便的方法:使用 img 的 onerror 事件 https://www.jb51.net/article/8796.htm 正常显示前者,错误时显示后者 <img src=" ...
js判断图片是否存在
1,这个方法,我用了下,同一个图片路径,vue的环境下,本地是可以的,但是不知道为什么到了正式环境,存在的图片也被判断为了false //判断图片是否存在 function checkImgExist ...
js 判断图片是否加载完成
1.根据url来加载图片: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /** * 加载图片,直到加载完成后才调用回调函数 * @param url 后面读取图片流的u ...
js判断图片文件大小
火狐: var maxsize = 5*1024*1024;//5M var filesize = 0; filesize =uplist[i].f ...
js判断图片尺寸及大小
技术框架:vue + antd-vue 代码: <a-upload name="file" :multiple="true" :showUploadLis ...
JS判断图片是否加载完毕
/*** @function Determine if the image has been loaded.* @param img,callback*/ function imgIsLoaded(i ...
基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载...
2019独角兽企业重金招聘Python工程师标准>>> 最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多.在上传图片之前验证图片的格式,并同时实现预 ...
js如何最有效的判断图片类型
在做图片上传功能的时候,虽然大多数业务情况下都是支持所有图片格式.但是也会遇到一些规定图片格式的情况,尤其是在为了防止又恶意文件的情况下,因为每个图片都是二进制流,所以判断图片应该按头信息判断.相同格 ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...

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

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

js判断图片的网络地址是否有效相关推荐

最新文章

热门文章