方法一：
function getImgInfo (url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.src = url;
img.onload = function () {
resolve({
width: img.width,
height: img.height
});
};
img.onerror = function () {
reject(new Error("图片加载错误！"));
}
});
}
getImgInfo(‘http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/.jpg‘).then(imgInfo => {
console.log(imgInfo);
}).catch(error => {
console.log(error);
});
方法二：
function getImgInfo (url) {
return new Promise((resolve, reject) => {
let img = new Image();
img.src = url;
let timer = setInterval(function () {
if (img.width > 0 || img.height > 0) {
resolve({
width: img.width,
height: img.height
})
clearInterval(timer);
}
}, 50);
});
}
getImgInfo(‘http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg‘).then(imgInfo => {
console.log(imgInfo);
});
注： 我们常常知道有些图片虽然没有完全download下来，但是已经先有占位符，然后一点一点的加载。既然有占位符那应该是请求图片资源服务器响应后返回了宽和高。可服务器什么时候响应并返回宽高的数据没有触发事件，所以只能用轮询的方法。这个方法应该会比第一种方法能更早的取得图片的宽和高。