zl程序教程

您现在的位置是:首页 >  后端

当前栏目

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

JS事件 获取 图片 场景 不到 监听 依然
2023-09-14 09:07:44 时间

背景

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