js图片监听onload事件,依然有获取不到宽高的场景
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)
相关文章
- src引入js时添加时间戳参数方法
- JS - 音频的播放和暂停
- Node.js自定义对象事件监听与发射
- JS事件冒泡、停止冒泡、addEventListener--实例演示
- js 触发长按事件
- 如何查找元素对应事件的js代码
- js原生触发事件
- JS 利用正则表达式替换字符串
- js响应鼠标滚轮事件
- JS给元素循环添加事件的问题
- js事件探秘
- [Node.js] Using ES6 and beyond with Node.js
- 原 JS监听回车事件
- JS封装Cookie
- Atitit.js的键盘按键事件捆绑and事件调度
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
- paip.调试js 查看元素事件以及事件断点
- 如何使用 Node.js 访问 SAP HANA Cloud 数据库里的数据
- 华为OD机试 - 最多等和不相交连续子序列(Java & JS & Python)
- 华为OD机试 - TLV解析Ⅰ(Java & JS & Python)
- js实现浏览器窗口大小被改变时触发事件的方法
- 从零开始学_JavaScript_系列(八)——js系列<2>(事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单)
- 【nodejs原理&源码赏析(7)】【译】Node.js中的事件循环,定时器和process.nextTick
- js中如何在不影响既有事件监听的前提下新增监听器
- js 人民币小写金额转换为大写
- js绑定事件代理的坑
- js键盘事件
- js 鼠标事件模拟
- js自定义事件
- JS DOM事件(常用消息、常用事件、addEventListener、removeEventListener)
- js手机端长按选中文字执行事件