zoukankan      html  css  js  c++  java
  • 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 事件,可是没有任何作用,也不知道为什么。

    希望可以跟大家探讨一下。

  • 相关阅读:
    Java NIO使用及原理分析(二)(转)
    Java NIO使用及原理分析 (一)(转)
    虚拟机字节码执行引擎
    虚拟机类加载机制
    浅析Java中的final关键字
    java内存模型7-处理器内存模型
    java内存模型6-final
    最小生成树
    有向图的基本算法
    并查集(Union-Find)算法介绍
  • 原文地址:https://www.cnblogs.com/shanpow/p/4105490.html
Copyright © 2011-2022 走看看