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);

 

  

posted @ 2023-03-03 16:57  sycl  阅读(418)  评论(0编辑  收藏  举报