图片加载防闪动的CSS方法

图片闪动：在移动端设置图片布局时，图片使用自适应的方式，其父元素的高度是被图片高度撑开的。在图片加载前，父元素高度为0；加载后，父元素高度为图片高度。这样的过程会造成视觉上的闪烁，影响用户体验。
因此，在用图片撑开父元素高度之前，就需要给父元素设置一个高度。这个高度不能写成定值，否则无法适配移动端各种尺寸。此时，可以利用padding百分比的方式，来将父元素作为一个占位符，提前撑开高度，以便于图片加载后放入父元素中。这样的思路而言，图片元素必须是绝对定位（绝对定位相对于父元素的边框来定位），而父元素的padding-top或者padding-bottom则为百分比（具体的百分比与图片的宽高比例相关，如100%则是1:1)。
padding百分比是以父元素的宽度做基准的（horizon-flow）或者高度做基准（vertical-flow）
以图片宽高1:1为例，如下：
HTML代码如下：

<div class="content">
	<div class="picWrapper">
		<img src="url" />
	</div>
</div>

CSS代码如下：

.picWrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 100%;
}
.picWrapper img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}