修改图片src获取高度问题解决

需求

在刚进到页面时，需要根据后端传来的数据，判断要加载哪张图片，再获取图片的高度，来调整页面样式。

问题

在打开页面时，图片是加载出来了，但获取图片高度却为0，why...

$(".top-btn").height();  //0

解决

造成这样结果的原因是，图片在修改src之后，它要去寻找图片的路径然后加载出来，虽然这个时间很短暂，但是加载完成的时间点也绝对是晚于系统执行下一条语句。
但是我们可以创建一个Image，通过它的onload函数，就能够判断图片是否渲染完成，这样我们就可以去获取页面的图片元素的高度了。
上代码：

var img = new Image();
if (result.end == 1) { //后端获取的判断条件(无视)
  img.src = "./img/01.jpg";
} else {
  img.src = "./img/02.jpg"
}

$(".top-btn").html($(img)); //将创建的img插入到页面中
img.onload = function () {
  $('.wrapper').css({  //图片渲染完成，获取图片高度，赋值给wrapper
    "padding-bottom": img.height + "px"
  });
}