js快速获取大图原始宽高

获取图片原始大小常规方式

var url = 'http://www.xxx.com/xxx/xxxx.jpg';
var img = new Image();
img.src = url;
//如果有缓存
if(img.complete){
    console.log(`width:${img.width},height:${img.height}`);
}else{
    img.onload = function(){
        console.log(`width:${img.width},height:${img.height}`);
    }
}

上诉代码，如果要加载的图片非常大的时候，onload事件会等一直等到图片数据全部加载完成才能获取到图片的宽高数据。

快速获取大图宽高数据

var url = 'http://www.xxx.com/xxx/xxx.jpg';
var img = new Image();
img.src = url;
var check = function(){
    if (img.width>0 || img.height>0) {
        clearInterval(timer);
        console.log(`width:${img.width},height:${img.height}`);
    }
}
var timer = setInterval(check,50);
img.onload = function(){
    console.log(`width:${img.width},height:${img.height}`);
};

上诉代码加载无缓存的大图时，check方法会先于onload方法获取到图片的宽高数据。这是因为图片含有图片头数据和图片体数据。图片头数据中就包含了图片的宽高，所以当加载完图片头的时候，img的width和height就已经有值了，而不需要等待所有的图片数据都加载完。