项目里有这么一个功能,需要 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. 《高性能MySQL》

    <高性能MySQL>(第3版)讲解MySQL如何工作,为什么如此工作? MySQL系统架构.设计应用技巧.SQL语句优化.服务器性能调优.系统配置管理和安全设置.监控分析,以及复制.扩展和 ...

  2. [转] 一个程序猿眼中的国内主流地图api

    在网站或者手机应用中,经常用到地图api.在现在这么激烈的竞争下,各地图服务提供的服务基本都趋于一致了.一个公司推出的新服务,其他公司肯定也会很快的跟进.这样,对于开发者来说,地图api的选择就主要参 ...

  3. NAND flash NOR flash SDRAM区别

    nand flash:适合大容量数据存储,类似硬盘:nor flash:适合小容量的程序或数据存储,类似小硬盘:sdram:主要用于程序执行时的程序存储.执行或计算,类似内存. 区别:nor flas ...

  4. easyui grid中翻页多选方法

    <table class="easyui-datagrid" title="人员选择" id="dg" data-options=&q ...

  5. JavaScript escape encodeURI encodeURIComponent() 函数

    总结一下: 1.encodeURI(),和encodeURIComponent()是对字符进行编码. 2.decodeURI(),和decodeURIComponent()是对相应编码过的字符进行解码 ...

  6. CentOS FireFox Flash Player

    yum install *firefox* yum install flash-plugin

  7. C#利用SharpZipLib解压或压缩文件夹实例操作

    最近要做一个项目涉及到C#中压缩与解压缩的问题的解决方法,大家分享. 这里主要解决文件夹包含文件夹的解压缩问题. )下载SharpZipLib.dll,在http://www.icsharpcode. ...

  8. 【M10】在构造方法内阻止资源泄漏

    1.类中没有指针,如果对象构造过程中出现异常,C++保证已经构造好的那一部分自动销毁.注意:这里不是调用析构方法,而是编译器在你的构造方法中插入了一些代码,保证对已经构造好的对象析构. 2.类中有指针 ...

  9. Codeforces Round #188 (Div. 1) B. Ants 暴力

    B. Ants Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/317/problem/B Des ...

  10. Android消息机制——时钟显示和异步处理工具类(AsyncTask)

    1. 时钟显示 定义布局文件——activity_my_analog_clock_thread_demo.xml <?xml version="1.0" encoding=& ...