想为站点图片添加一个lazyload的效果，没成想整整耗费了两天的时间去解决图片高度的问题。未加lazyload之前的图片，比例均衡姿态完美，一加lazyload，宽度没有什么问题，但灰色的placeholder区域整整高出了几层楼，于是等lazyload一结束，图片刷的一蹦三尺高。
placeholder方案
尝试了一下用一张与图片同尺寸的灰色图案代替，不使用默认的placeholer，可以解决这个问题，页面重新加载时的比例确实均衡了，但是一想，这图片尺寸各异的时候不能挨个去做对应尺寸的loadding图片吧。于是尝试想找个更为简单的方式。
jquery方案
仔细观察了一下页面，发现页面宽度是正常的，仅仅是高度产生了异常，在js运行过程中console.log测试了一下，发现：
$('.catelist-img img').width();可以正常输出图片的宽度，但尝试输出高度的时候得到的数值是0。既然自己知道图片比例，又有了图片宽度，那就直接按宽度计算高度呗。
$('.catelist-img img').height($('.catelist-img img').width()/3);尝试在lazyload语句之前加了这么一句，提前设置了图片的宽度。实际页面效果确实变好了，一般出现“确实”，“倒是”这类词的时候，往往代表问题好像解决了，又没有完全解决。尝试缩小窗口的时候发现，固定的style限制了图片的高度，导致页面自适应变换的时候，图片比例失调了。
玄学操作
行内style具备最高的优先级，于是尝试给css的图片高度加了一个important，缩放正常了，加载黑边又回来，一切又回到了原点。
.catelist-img > img{
display:block;
width: 100%;
height: auto!important;
}解铃还需系铃人
去掉了important，既然是行内css的锅，找个合适的时机删除掉吧。直接在lazyload语句后增加了一句：
$('.catelist-img img').removeAttr('style');加载黑边继续顽固存在，看来这个高度不能在读取前删除，因为是手动缩放时产生的变形，那么就加在resize里吧，问题是暂时解决了。不清楚有没有更好的方案，看着眼前七零八落的代码，耳边响起一句名言：如果代码能跑，那就不要尝试去改动它了。 -_-!!!
