首页 > 其他分享 >vue获取不到页面图片实际宽高

vue获取不到页面图片实际宽高

时间:2023-03-03 17:14:27浏览次数:27  
标签:定时器 img 加载 宽高 timer 获取 vue 页面 图片

在某些情况下需要页面图片的宽高,使用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);

 

  

标签:定时器,img,加载,宽高,timer,获取,vue,页面,图片
From: https://www.cnblogs.com/sycl/p/17176274.html

相关文章