使用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函数