前端页面对于图片等资源来说,加载是需要时间的,即便网页加载速度已经很快了,由于高度被图片撑开的过程,不可避免会出现闪烁,那怎么解决呢?对于图片,默认只设置图片的一个宽或高,那么另一个值就会按照图片真实比例缩放。这时候我们利用已知图片的宽高比例来设置图片未加载前所要占位的宽高
如下面一段代码,已知图片的宽高比为1:1.3
<ul>
<li class="item placeholder"><img class="img"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532110043386&di=dc7277a3b566e40a9d98d736f1613dd2&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2016-5%2F201605301928431736188.png">
</li>
<li