首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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" // 创建对象

3.9K20
您找到你想要的搜索结果了吗?
是的
没有找到

onload 和 domready

博客地址:https://ainyi.com/46 window.onload 事件会在页面或图像加载完成后触发(即所有元素的资源都下载完毕) 如果页面上有许多图片、音乐或 falsh 还没加载完成,onload...= function(){ alert("DOM 加载完毕,所有资源都下载完成"); } // 或者经常用到的图片,假设这个 document.getElementById("imgID").onload...dom 进行操作,比如一张图片只要 img 标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等; 2、Dom Load 是在整个 document 文档(包括了加载图片等其他信息)加载完成后就可以直接对...dom 进行操作,比如加载一张图片,要等这个图标加载完成之后才能设置图片的宽高的属性或样式等; onreadystatechange 事件 onreadystatechange 事件与 onload...script 元素支持 onreadystatechange 事件,不支持 onload 事件 在 IE 下,可以使用 onreadystatechange 完成 onload 事件,判断 readyState

2.6K20

JS 图片压缩

前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...this; let reader = new FileReader(); // 读取文件 reader.readAsDataURL(img); reader.onload...) { let image = new Image(); //新建一个img标签 image.src = e.target.result; image.onload

25.7K21

DOMContentLoaded和window.onload

大家好,又见面了,我是全栈君 相信写js的。都知道window.onload吧,可是并非每一个人都知道DOMContentLoaded,事实上即使你不知道。非常有可能你也常常使用了这个东西。...普通情况下,DOMContentLoaded事件要在window.onload之前运行,当DOM树构建完毕的时候就会运行DOMContentLoaded事件,而window.onload是在页面载入完毕的时候...这当中包含图片等元素。大多数时候我们仅仅是想在DOM树构建完毕后,绑定事件到元素。我们并不须要图片元素。加上有时候载入外域图片的速度很缓慢。.../delay.png'); 在firefox和chrome以及opera中都能够清楚的看到,在图片未载入之前。id为status的段落已经显示了“DOM is ready now!”。...然后等5秒钟后,图片载入完毕后,此段落显示”DOM is ready AND wondow.onload is excute!”

1.4K50

js拖拽上传图片

有时候,在开发中,需要遇到拖拽上传图片的需求,即从磁盘选中一张或多张图片,然后按着鼠标把图片拖动到页面上指定的区域,实现图片的上传。...1、后端上传图片的接口 我是之前用vue写一个简单的后台系统的时候,用Java的SpringMVC+MyBatis的框架写了一个简单的后台管理的一些接口,刚好有一个上传用户头像的接口,该接口是把上传后的图片存储在另外一台...Tomcat下,这里就直接使用这个接口来上传图片。...ie=edge"> Document <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.<em>js</em>...里面用的formData对象来上传<em>图片</em>的,该对象的作用是:   1、用一些键值对来模拟一系列表单控件,即把form中所有表单元素的name与value组装成一个queryString;   2、异步上传二进制文件

18.1K30
领券