img元素获取图片高度
网页编程时，想要知道图片大小可借助 JavaScript，用 jQuery的话就简单多了！只要选对 img 元素再用 height()这个方法就能轻易拿到图片高宽啦～不过要提醒下大家，此法只得元素身高，没算上边框和内边距的。要是想把这些也算进去可试试 outerHeight()这么个招儿。
用jQuery选’img’，就能拿到网页里的图，然后给它身高（方法是`height()`）。这样就能知道图有多高。这招对于那些静态网页上直接放图片很管用。只要点点代码，就能快速知道想要的图的高度，对页面布局和设计超级方便！
<pre class='brush:javascript;toolbar:false;’>var height = $(‘img’).height();
实际上，咱们有时候要从不同角度出发，投入到开发过程中，调整图片展现和布局。搞清楚图片高度，就能随心所欲地控制网页元素的美感了，让用这个功能的家伙们感觉更加舒服。
load事件获取图片高度
别傻乎乎地只知道用选择器拿图的高度！其实你也能等图片加载完之后，用load事件和height()方法来获取高宽。这么做就不怕干活儿时图片没加载完出乱子了
用load()方法弄好事件绑定之后，在事件处理函数里你就能用$(this)这个东东代表刚刚载入完的图。这样做就能确保等图真的载完了再去进行其他操作，不再会被没有载入好的问题困扰！
$('img').on('load', function() {
var height = $(this).height();
});
咱们做网页的时候，经常会遇到好多大图！为了让大家玩得开心也快快看到想看的，建议先等着把所有的图都弄完再说~这时候，用load事件来测图大小就挺实用的了。
新创建Image对象获取图片高度
除了之前说的这两种办法，还有个办法就是搞个新Image对象，然后给它设个src属性，等加载完了就用那个 onload事件处理函数去搞定其他事。
当你创建一个新的Image对象时，设置它的src属性就相当于告诉浏览器要加载那个图片了。而onload事件处理函数，就是等你的图片全加载完了以后才会继续干其他事。别看这个过程有点麻烦，但在需要预先加载大量图片并处理的场合还是挺好用的~
记住！用原生JS创建了Image对象之后，要想继续利用jQuery做些啥，得让它变成jQuery对象才行，这样子就能好好享受到jQuery带来的便捷，跟其他页面元素互动也更流畅哒~
var img = new Image();
img.onload = function() {
var height = this.height;
}
img.src = 'image.png';
综述
这篇文章教你用3招搞定网页图片高度问题，轻轻松松用上jQuery不管是挑个img元素、等它加载完还是搞出个新的Image对象，总有一款适合你，看你啥时候有空！
在实际编程里边儿，选个好办法得看具体情况来定！别忘了关注页面运行速度跟用户体验，在能完成功能的基础上，尽量省去没用的资源让页面加载更快点就对了！
学得多、用得广，能把jQuery里的功能娴熟掌握，帮咱们网页制作省力不少！期待着能用上更新的技术和手法来提升自己的技巧。
$(img).appendTo('body');
。
评论0