js图片监听onload事件，依然有获取不到宽高的场景

蓓蕾心晴

发布于 2022-05-09 15:25:13

3.9K0

发布于 2022-05-09 15:25:13

背景

在实际开发中，移动端页面遇到的，采用正常写法，图片 src赋值写在 onload 事件监听后面，依然会有拿不到图片真实宽高的场景，获得的图片宽高都为0，真的是好坑啊。

var img_url = '.jpg'

// 创建对象
var img = new Image()

// 加载完成执行
img.onload = function(){
    console.log(img.width,img.height)
}
// 改变图片的src
img.src = img_url

解决

参考了该文章

关键时刻，还是得靠定时器轮询啊！！！

为了避免图片加载失败或不存在等长场景导致定时器一直执行，可以加一个兜底，比如10秒钟之后自动清除定时器。

// 记录当前时间戳
var start_time = new Date().getTime()
// 图片地址 后面加时间戳是为了避免缓存
var img_url = "xxx.jpg"
// 创建对象
var img = new Image()
// 改变图片的src
img.src = img_url
// 定时执行获取宽高
var check = function(){
 // 只要任何一方大于0
 // 表示已经服务器已经返回宽高
    if (img.width>0 || img.height>0) {  
        clearInterval(set);
    }
}
var set = setInterval(check,40)
setTImeout(()=>{
   clearInterval(set);
},100000)

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

onload