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

背景

在实际开发中，移动端页面遇到的，采用正常写法，图片 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)