在某些情况下需要页面图片的宽高,使用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. Mybatis获取插入值的ID

    需求: 在后台做多次插入的时候,需要使用返回ID,然而普通的操作是无法做到的 Mybatis可以在insert的标签 上加上 keyProperty='id' useGeneratedKeys=&qu ...

  2. vs2019编写代码时的光标变成了黑块,选中字时替换掉了黑块选中的字的解决方法

    这是由于不小心按到了Insert键 解决方法:再按一下Insert就好了. 因为插入键(insert)是一个状态表示键 当你按倒它时,它会进入一个覆盖模式,在光标位置新输入字会替代原来的字:另一种为插 ...

  3. el-transfer 数据量过大加载慢卡顿解决办法:el-transfer虚拟滚动懒加载的实现

    参考链接 1)https://github.com/GreenHandLittleWhite/blog/issues/152)https://github.com/GreenHandLittleWhi ...

  4. 安装和配置Java开发环境JDK

    我们通常软件开发的操作系统选择Windows,生产环境选择linux或windows Server.移动开发可能是安卓或IOS和鸿蒙系统等. Windows下一般选择的是64位的操作系统,一般建议CP ...

  5. 视觉十四讲:第六讲_g2o图优化

    g2o是一个基于图优化的库,图优化是把优化问题表现为一种图的方式.一个图由若干个顶点和边组成. 顶点表示优化变量,边表示误差项. g2o的使用步骤: 1.定义顶点和边的类型: 2.构建图: 3.选择优 ...

  6. 2.16 win32信息 事件 机制-创建第一个win32程序

    事件和信息 事件,例如鼠标的单机 会保存很多数据 这个便是信息 Windows为了能够准确的描述这些信息,提供了一个结构体:MSG,该结构体里面记录的事件的详细信息. typedef struct t ...

  7. 【KAWAKO】iphone13pro开箱流程

    目录 全程录像 检查包装盒 检查包装盒内物品 检查各种码 拆封 激活 激活之后 检查屏幕 检查其它功能 贴膜(选) References 全程录像 如果你觉得你所购买的平台 (比如某ABB格式名字的平 ...

  8. LeetCode算法训练-贪心算法 455.分发饼干 376. 摆动序列 53. 最大子序和

    欢迎关注个人公众号:爱喝可可牛奶 LeetCode算法训练-贪心算法 455.分发饼干 376. 摆动序列 53. 最大子序和 前置知识 贪心算法核心是找局部最优解,通过局部最优推导出全局最优 Lee ...

  9. day12_内部类&API

    1.参数传递 1.1 类名作为形参和返回值 类名--方法形参     方法的形参是类名,需要的是该类的对象:实际传递的是该对象的地址值 类名--返回值     方法的返回值是类名,返回的是该类的对象: ...

  10. JMeter 常用的几种断言方法

    一.Jmeter 断言背景 在使用Jmeter进行性能测试或者接口自动化测试工作中,经常会用到的一个功能,就是断言.断言是在请求的返回层面增加一层判断机制.因为请求成功了,并不代表结果一定正确,因此需 ...