首页/ 填坑/ 文章详情

new Image() 获取图片真实的大小

Image() 图片大小 complete onload 发布于 2021-08-05

图文并茂的网页,图指的是图片。图片以外部资源出现在网页上,曾几何时你会发现图片不像文字,瞬间能加载进来。在没有指定图片大小时,首次加载的图片由小到大的或模糊到清晰加载进来。

图片未完成加载进来前,图片大小皆获取失败。第二次刷新页面,浏览器缓存加载过的图片,无须等待,即可获取图片大小,以致于你误判成功获图片大小。

判断图片是否加载完成

JSvar image = new Image();
image.src = 'https://www.didaolan.cn/dist/images/logo.svg';

if(image.complete == true) {
    console.log('图片已加载完成')
}

一般情况下,图片加载是一个传输的过程,需要时间去完成,通常直接使用complete显示的结果是false,需要额外添加个定时器监听其状态。

使用定时器监听总感觉不利所,这里你需要了解下onload方法:图片加载完后,触发该事件。可以准确获取图片的大小。

onload 加载事件

JSvar image = new Image();
image.src = 'https://www.didaolan.cn/dist/images/logo.svg';

image.onload = function() {
    var width = image.width;
    var height = image.height;
    
    console.log('图片长:'+width);
    console.log('图片宽:'+height)
}

※  Chrome浏览器按F12,Network选项框勾上Disable cache,不缓存外部资源。

文章评论0 records

最新 最早

0

最新评论Latest comments

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!