在某些情况下需要页面图片的宽高,使用Image获取加载图片获取图片宽高时为0,是因为图片未加载完返回宽高为0

如果未获取到宽高需要使用定时器定时获取图片,直到获取到后再清除定时器

示例代码:

// new一个图片实例对象
var img = new Image();
let timer = "";
// 设置图片初始宽高为0
let width = 0;
let heifht = 0;
// 使用定时器定时获取图片的高度或者宽度
timer = setInterval(() => {
img.src = this.images[this.index]; // 图片地址示例
// (1)如果值为0说明还没加载回来,不执行任何操作,让定时器再次执行
// (2)如果值不为0说明已经加载回来了,清除定时器,然后执行接下来的操作
if (img.height) {
clearInterval(timer);
timer = null;
width = img.width;
height = img.height;
}
}, 1);

  

vue获取不到页面图片实际宽高的更多相关文章

  1. AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)

    文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...

  2. vue : 检测用户上传的图片的宽高

    需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限, ...

  3. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  4. RT/Metro商店应用如何如何获取图片的宽高

    RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...

  5. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  6. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  7. 根据图片url地址获取图片的宽高

    /** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...

  8. elementUI upload 对图片的宽高做校验

    很开心今天中午没有吃饭!原因是一直没有解决掉一个小问题,于是一直试错,最后看了下源码才有了点头绪,历时四五个小时才解决掉,有点怀疑自己的能力了,所以写下此文,记录一下今天的囧况!一般情况下遇到问题,自 ...

  9. iOS学习-压缩图片(改变图片的宽高)

    压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...

  10. java读取远程url图片,得到宽高

    链接地址:http://blog.sina.com.cn/s/blog_407a68fc0100nrb6.html import java.io.IOException;import java.awt ...

随机推荐

  1. redis-04配置文件

    1.daemonize no # By default Redis does not run as a daemon. Use 'yes' if youneed it.# Note that Redi ...

  2. python判断密码连续,重复,大小写、数字、符号混合密码复杂度要求

    一.python 判断密码连续,重复,大小写.数字.符号混合密码复杂度要求 1. 运行环境 python 3.6.8 2. 密码必须包含大小写.数字.特殊符号中的3种且长度为8-16位 def ver ...

  3. Android面试-字节一面

    距离上次跳槽已经过了3年多,突然看到字节的HR来捞.想着自己好久没面了,就打算去试试看. 0. 准备 视频面试,不用去现场真的太赞了.由于项目比较忙,自己又不是特别想跳槽,所以没怎么准备.面试当天看了 ...

  4. webrtc QOS笔记一 Neteq直方图算法浅读

    webrtc QOS笔记一 Neteq直方图算法浅读 目录 webrtc QOS笔记一 Neteq直方图算法浅读 Histogram Algorithm 获取目标延迟 遗忘因子曲线 想起博客园帐号了, ...

  5. 手写一个audio播放器,实现歌曲切换,列表歌曲循环,音量调节等 vue组件

    1 <template> 2 <div class="wrapper"> 3 <svg 4 t="1673833915638" 5 ...

  6. Vulhub 漏洞学习之:Drupal

    Vulhub 漏洞学习之:Drupal 目录 Vulhub 漏洞学习之:Drupal 1 Drupal < 7.32 "Drupalgeddon" SQL注入漏洞(CVE-2 ...

  7. 脊柱关节病外周关节滑膜高表达的RANK/RANKL/OPG系统与炎症呈部分分离

    脊柱关节病外周关节滑膜高表达的RANK/RANKL/OPG系统与炎症呈部分分离Vandooren B, et al. Arthritis Rheum. 2008;58:718-729目的:脊 柱关节病 ...

  8. 国外的SRE都是干啥工作的?薪资如何?

    本文翻译自:https://www.flagship.io/glossary/site-reliability-engineer/,意译~ 众所周知,开发和 IT 运营之间因为屁股决定脑袋,存在巨大的 ...

  9. 基于OpenGL绘制shp文件

    1. 引言 坐标数据是空间数据文件的核心,空间数据的数据量往往是很大的.数据可视化是GIS的一个核心应用,绘制海量的坐标数据始终是一个考验设备性能的难题,使用GPU进行绘制可有效减少CPU的负载,提升 ...

  10. null和undefine的区别

    null和undefine都是基本数据类型,两种类型都只有一个值. 区别: 1.undefined表示已经声明未定义,null表示的是一个空对象(null并不是空对象,js的typeof会将null判 ...