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 事件，可是没有任何作用，也不知道为什么。

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

转载于:https://www.cnblogs.com/shanpow/p/4105490.html