使用Image的异步加载判断是否为图片链接

最近开发了一个功能,是提供输入图片链接来保存图片。那么怎么判断输入的链接是一个图片链接呢?

可以使用图片的异步加载功能来验证。

实现

var img = new Image();

img.onload = function () {
    // 图片链接会加载成功
    console.log('图片加载成功');
};
img.onerror = function () {
    // 非图片链接会加载失败
   console.log('图片加载失败'); 
};
img.src = "demo.jpg";

document.body.appendChild(img);

注意点

src与onload的书写顺序

IE9以下,浏览器加载本地图片非常快,onload定义在src之后可能会导致顺序:src赋值 => 触发onload => 定义onload回调。这样onload回调就来不及执行了。

为了避免上述情况,建议先定义onload和onerror,再赋值src。

参考链接

图片的异步加载与onload函数

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容