jq获取页面元素的高度与实际不符合(无法获取图片高度，有时候可以，有时候不行)，急急急！！！！！

Question

元素里面有张图片，开始以为是图片没加载出来导致的，我再图片那加了个onload事件也是不行，求问为什么？

<div class="bd">
<ul>
    <li><a href="#"><img src="images/icon_list01.png" class="one" /></a><p>家政服务</p></li>
    <li><a href="#"><img src="images/icon_list02.png" /></a><p>医疗保健</p></li>
    <li><a href="#"><img src="images/icon_list03.png" /></a><p>饮食服务</p></li>
    <li><a href="#"><img src="images/icon_list04.png" /></a><p>生活照料</p></li>
    <li><a href="#"><img src="images/icon_list05.png" /></a><p>康复护理</p></li>
    <li><a href="#"><img src="images/icon_list06.png" /></a><p>心里疏导</p></li>
</ul>
</div>

css

.bd ul{ width:100%;  float:left; padding-top:.1rem;  }
.bd li{ width:30%; height: 100%; float:left; text-align:center; margin: .1rem;}
.bd li p{font-size: .28rem;}
.bd li a{display: inline-block; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */ }
.bd li img{ width:100%;}

js

var a = $('.bd ul li a').height();

Answer 1

经过一轮百度之后得到：

function imgLoad(img, callback) {
            var timer = setInterval(function() {
                if (img.complete) {
                    callback(img)
                    clearInterval(timer)
                }
            }, 50)
        }
        imgLoad(img1, function() {
            p1.innerHTML('加载完毕')
        })

Answer 2

图片css属性呢？是不是有position:absolute;或类似使图片不占div空间的东西。

Answer 3

Element.clientWidth可以获取到元素的宽度
该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用 element.getBoundingClientRect()。
语法
var intElemClientWidth = element.clientWidth;
来自
https://developer.mozilla.org...

Answer 4

$('.bd ul li a').height()这是a标签的高度，试试$('.bd ul li img').height();

Answer 5

把a的属性设置为block吧，图片属于内联元素，a也属于内联元素。当内联元素在内联元素里面时，内部的内联元素就默认是一个字体的高度，我想21px是你的line-height的高度吧

Answer 6

js 获取 a的高度的时候， 图片还没有加载出来 ，拿不到高 跟 js的顺序有关。

Answer 7

$('img').each(function(index){
  var $this = $(this);
  var src = $this.attr('src');
  var img = new Image()
  img.onload = function(){
    console.log(this.src, this.width);
  }
  img.src = src;
});