JS快速获取图片实际宽高

JS快速获取图片实际宽度

简单的获取图片宽高

var url = 'https://images.pexels.com/photos/2433022/pexels-photo-2433022.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';

var img = new Image();
img.src = url;
console.log('宽是: ' + img.width, '高是:' + img.height);

为什么宽高都是0呢,很简单:因为图片资源在还未加载完毕前,默认宽高就是0,所以要想获取到宽高,我们要在图片加载完毕后去获取。

onload后获取图片宽高

var url = 'https://images.pexels.com/photos/2433022/pexels-photo-2433022.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';

var img = new Image();
img.src = url;
img.onload = () => {
   console.log('宽是: ' + img.width, '高是:' + img.height);
}

当图片加载完毕后,再次通过onload去获取图片的宽高,就可以获取到相关数值了。但是这样获取也会存在一个问题:如果图片小的话,这个获取时间间隔用户是几乎感觉不到的,但如果图片比较大的话,以至于一张图片达到10MB之多的时候,获取的时间会有点长,这样的体验效果其实也不太好。

complete与onload混合使用

var url = 'https://images.pexels.com/photos/2433022/pexels-photo-2433022.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';

var img = new Image();
img.src = url;
if ( img.complete ) {
    console.log('浏览器缓存获取,宽是: ' + img.width, '高是:' + img.height);
} else {
    img.onload = () => {
        console.log('第一次加载获取,宽是: ' + img.width, '高是:' + img.height);
    }
}

第一次执行,永远是onload触发,你再刷新,几乎都是缓存触发了。onload方法在获取的时候会慢慢的加载出来,但已经先有了占位符,此时资源服务器已经返回图片的宽高了,这个时候我们需要获取占位符的信息。

如果既没有缓存而又比onload更快速的获取方法有吗?请看下面的方法。

定时循环检测

// 记录当前时间戳
var start_time = new Date().getTime();
// 图片地址 后面加时间戳是为了避免缓存
var img_url = 'https://images.pexels.com/photos/2433022/pexels-photo-2433022.jpeg?'+start_time;
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 定时执行获取宽高
var check = () => {
 // 只要任何一方大于0
 // 表示已经服务器已经返回宽高
    if (img.width > 0 || img.height > 0) {
        var diff = new Date().getTime() - start_time;
        document.body.innerHTML += '<p>检测获取宽高: width:' + img.width + ',height:' + img.height + ', time:' + diff + 'ms</p>';
        clearInterval(set);
    }
}
var set = setInterval(check,40);
// 加载完成获取宽高
img.onload = () => {
    var diff = new Date().getTime() - start_time;
    document.body.innerHTML += '<p>onload获取宽高 : width:' + img.width + ',height:' + img.height + ', time:' + diff + 'ms</p>';
};

看如下视频,结果显示:

由此可见,该图片的宽高为3482*4352,大小达近10MB,通过快速检测方法获取到的图片宽高时间仅为0.3秒,而通过onload来通过加载后获取图片宽高的时间为21秒,这个差距相差很大,这就取决于大家要在适当的时候使用适当的方法,来节省时间,获取更好的交互体验最重要。

相关文章

加入讨论 暂无讨论

发表评论

评论内容不能为空
昵称不能为空
请输入有效的电子邮件地址

有人回复时邮件通知我