img 元素无法获取高度的问题
项目里有这么一个功能,需要 ajax 从服务器端获取数据,然后本地生成 DOM 结构再 append 到页面上。
其中的图片是直接拿到的图像数据,而不是 url,所以据此生成 dataURI 赋值给 img 元素,以此来显示图片。然后再根据 img 元素的高度进行下一步的计算。
那么问题来了,通过 dataURI 赋值给 img 元素的,无论如何也没法获得 img 的高度,始终返回父元素的高度。
通过控制台单步跟踪调试,却又是可以获取到正确高度的。
我心里第一个反应就是,可能 sleep 一下就可以了。然后就用 setTimeoout 设置 10ms 后去获取高度,果然可以正确执行。
后来去网上搜索了一大圈,都没有看到有相关问题的结果,于是只好继续用我这个笨办法。
所以,我得到的结论就是,dataURI 的 img 元素 append 到 DOM 树以后,如果立即去获取它的高度,是不会返回正确的结果的,因为事实上 img 元素还没有 ready。这个跟浏览器的性能有关,不同浏览器,不同计算机,img ready 的时间都不一样。所以延迟一段时间再去获取 img 高度可以获取正确的数据。一般 50ms 就可以了。
另,
我也试过绑定 ready 事件,可是没有任何作用,也不知道为什么。
希望可以跟大家探讨一下。
img 元素无法获取高度的问题的更多相关文章
- jquery获取元素与屏幕高度距离
a. onscroll事件 scroll是css样式中overflow的一个值,意思是显示滚动条;当一个元素的实际高度超过他的最大高度是,只要设置了overflow为scroll b. $(..).s ...
- JS-009-屏幕分辨率、浏览器显示区域、元素位置获取
此文简略讲述有关屏幕大小.元素位置及大小获取. 执行文中脚本时,请先打开 Chrome 浏览器,并切换至开发者工具的控制台,并打开网址:http://www.yixun.com/,文中元素事例为页面元 ...
- jquery获取高度错误(可以获取到宽度,但获取不到高度),及解决办法
<div class="foo"> <div style="display: none;"> 3333333 </div> ...
- UITableView自定义Cell中,纯代码编程动态获取高度
在UITableView获取高度的代理方法中,经常需要根据实际的模型重新计算每个Cell的高度.直接的做法是在该代理方法中,直接根据模型来返回行高:另 [1]-(CGFloat)tableView:( ...
- 微信小程序中获取高度及设备的方法
由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...
- 如何让 height:100%; 起作用---父级元素必须设定高度
参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...
- js获取高度和宽度
CreateTime--2017年7月24日10:15:47Author:Marydon js获取高度和宽度 参考连接:http://www.cnblogs.com/EasonJim/p/6229 ...
- (转载)iOS UILabel自定义行间距时获取高度
本文介绍一下自定义行间距的UILabel的高度如何获取,需要借助一下开源的UILabel控件:TTTAttributedLabel 附下载地址 https://github.com/TTTAttrib ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- application与cache
每个项目都有一些全局,常用的信息,而这些信息如果在每次使用时都载入,那必将耗费很大的资源,特别是对访问压力大的系统.因此,这个情况中,把这些全局信息放到缓存中是很必要的,放在缓存中可以使得数据能够很快 ...
- winform系统自动登录实现
转载:http://www.cnblogs.com/wuhuacong/archive/2012/08/21/2648339.html 系统自动登录有时候很必要,在用户自己绝对信任的电脑上,自动登录对 ...
- ATSHA204加密认证IC
The Atmel® ATSHA204 is a full turnkey security device. It includes a 4.5Kb EEPROM divided into 16 sl ...
- mina高并发短连接导致java.io.IOException: Too many open files解决方案
http://marsvaadin.iteye.com/blog/1698924 mina性能测试 http://hi.baidu.com/rendong/item/bb5d2b0e4563c76dd ...
- Commons IO方便读写文件的工具类
Commons IO是apache的一个开源的工具包,封装了IO操作的相关类,使用Commons IO可以很方便的读写文件,url源代码等. 普通地读取一个网页的源代码的代码可能如下 InputStr ...
- android4.4.2 短信广播变更
近期三星陆续放出android4.4.2ROM更新包,android4.4.2对短信虽说是放开了权限,但其实是加强了限制,一台手机智能通过一个设置为默认应用的短信应用软件才能发送短信,否则就无法对短信 ...
- Microsoft Robotics Developer Studio 4
Microsoft Robotics Developer Studio 4 Share Language: English Download Microsoft® Robotics ...
- Flex-Security权限控制框架
转自:http://code.google.com/p/flex-security/ flex UI组件权限控制框架 一.快速开始 1) 下载并添加flex_security.swf在你的flex l ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- [原创]SSIS-执行包任务调用子包且子包读取父包变量
背景: 有时候需要将一个个开发好的独立的ETL包串接起来形成一个独立而庞大的包,如:每家分公司都开发不同的ETL包,最后使用执行包任务来将这些分公司的包给串联起来形成一个独立而完整运行的E ...