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正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- [p2p]UDP用打洞技术穿透NAT的原理与实现
首先先介绍一些基本概念: NAT(Network Address Translators),网络地址转换:网络地址转换是在IP地址日益缺乏的情况下产生的, ...
- 从UnitedStack OS 1.0 Preview试用申请问卷调查学习OpenStack
http://www.diaochapai.com/survey/ 您的角色最可能是? * (必填, 多选) OpenStack私有云用户,希望能将OpenStack/UOS用于公司内部私有云 云计算 ...
- zookeeper的安装和启动
最近的手上一个项目要用到dubbo,顺便研究下zookeeper 1.下载 下载地址:http://www.apache.org/dyn/closer.cgi/zookeeper/,下载解压到D:\t ...
- 【6】连续序列和为s
题目:输入一个整数s,打印出全部和为s的连续整数序列(至少含有2个数).比如输入9,则输出2.3.4和4.5两个序列 方案一:因为序列至少要2个数,则两个数上限值为(1+s)/2,我们能够枚举该序列的 ...
- 【MongoDB】mongoimport and mongoexport of data (一)
In the software development, we usually are faced with a common question of exporting or importing d ...
- Socket编程学习之道:揭开Socket编程的面纱
对TCP/IP.UDP.Socket编程这些词你不会非常陌生吧?随着网络技术的发展.这些词充斥着我们的耳朵. 那么我想问: 1. 什么是TCP/IP.UDP? 2. S ...
- HTML <base> 标签
定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...
- VS2010中文/vs2008英文版/vs2005下载地址
ed2k://|file|cn_visual_studio_2010_ultimate_x86_dvd_532347.iso|2685982720|4AE6228933DDE49D9BFA4C3467 ...
- this class is not key value coding-compliant for the key XXX错误的解决方法
转自:http://www.cnblogs.com/zhangronghua/archive/2012/03/16/iOSError1.html 今天在听iOS开发讲座时,照着讲座的demo输入代码, ...
- Windows内存管理和linux内存管理
windows内存管理 windows 内存管理方式主要分为:页式管理,段式管理,段页式管理. 页式管理的基本原理是将各进程的虚拟空间划分为若干个长度相等的页:页式管理把内存空间按照页的大小划分成片或 ...