项目里有这么一个功能,需要 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 元素无法获取高度的问题的更多相关文章

  1. jquery获取元素与屏幕高度距离

    a. onscroll事件 scroll是css样式中overflow的一个值,意思是显示滚动条;当一个元素的实际高度超过他的最大高度是,只要设置了overflow为scroll b. $(..).s ...

  2. JS-009-屏幕分辨率、浏览器显示区域、元素位置获取

    此文简略讲述有关屏幕大小.元素位置及大小获取. 执行文中脚本时,请先打开 Chrome 浏览器,并切换至开发者工具的控制台,并打开网址:http://www.yixun.com/,文中元素事例为页面元 ...

  3. jquery获取高度错误(可以获取到宽度,但获取不到高度),及解决办法

    <div class="foo"> <div style="display: none;"> 3333333 </div> ...

  4. UITableView自定义Cell中,纯代码编程动态获取高度

    在UITableView获取高度的代理方法中,经常需要根据实际的模型重新计算每个Cell的高度.直接的做法是在该代理方法中,直接根据模型来返回行高:另 [1]-(CGFloat)tableView:( ...

  5. 微信小程序中获取高度及设备的方法

    由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...

  6. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

  7. js获取高度和宽度

      CreateTime--2017年7月24日10:15:47Author:Marydon js获取高度和宽度 参考连接:http://www.cnblogs.com/EasonJim/p/6229 ...

  8. (转载)iOS UILabel自定义行间距时获取高度

    本文介绍一下自定义行间距的UILabel的高度如何获取,需要借助一下开源的UILabel控件:TTTAttributedLabel 附下载地址 https://github.com/TTTAttrib ...

  9. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

随机推荐

  1. Java中返回参数值的几种状态

    Java 中无参无返回值方法的使用 第一步,定义方法 例如:下面代码定义了一个方法名为 show ,没有参数,且没有返回值的方法,执行的操作为输出 " welcome to imooc. & ...

  2. 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息--3.2 Create创建用户]

    3.2 Create创建用户 [HttpPost, Authorize] public async Task<ActionResult> Create( [Bind(Include = & ...

  3. 更改VisualStudio默认创建类和接口不加public问题

    由于VisualStudio创建类和接口时,默认的是不加public关键字的,而我们大多数时候创建的类都是public的,于是,为了更好工作觉得改之. 首先找到在VisualStudio安装目录下路径 ...

  4. 浅析WINFORM工具条的重用实现

    一直以来,我都想看看别人家的工具栏重用(图1)到底是如何实现的,但在网上搜索了很久都没有找到过,即使找到一些程序,要么就是把这个工具栏写在具体的画面(图2),要么就是没有源代码的, 我在想,是否别人也 ...

  5. Matrix对bitmap的一些操作

    本篇文章是对使用Matrix对bitmap的旋转与镜像水平垂直翻转进行了详细的分析介绍,需要的朋友参考下  Bitmap convert(Bitmap a, int width, int height ...

  6. Uva10474 - Where is the Marble?

      两种解法: 1.计数排序 //计数排序 #include<cstdio> #include<iostream> #include<vector> #includ ...

  7. 新建VM_Script

    在Hyper-V群集中,不需要设置VM的自启动,当宿主机意外关机重新启动后,上面的VM会自动转移到另一台主机:如果另一台主机处于关机状态,则宿主机重新启动后,其VM也会自启动(如果其VM在宿主机关机前 ...

  8. WCF入门教程(三)属性标签

    属性标签,成为定义协议的主要方式.先将最简单的标签进行简单介绍,以了解他们的功能以及使用规则. 服务协定标识,标识哪些接口是服务协定,哪些操作时服务协定的一部分,以及传输对象的定义.如果已经有所了解, ...

  9. Citrix 服务器虚拟化之二十七 XenApp6.5发布服务器桌面

    Citrix 服务器虚拟化之二十七  XenApp6.5发布服务器桌面 XenApp可发布以下类型的资源向用户提供信息访问,这些资源可在服务器或桌面上虚拟化: 1)  服务器桌面:发布场中服务器的整个 ...

  10. 清除SQL Server 2008中登陆时的历史记录

    win7 在地址栏直接输入下面路径,删除SqlStudio.bin文件%AppData%\Microsoft\Microsoft SQL Server\100\Tools\Shell