对于图片列表，通常会使用懒加载的方式，好处就不多说了。通常实现是图片的 src 放一张占位符, data- 属性是原图地址，监听 滚动及触摸事件，如果在 viewport 内，加载原图。
对于相同尺寸图片列表来说，如果图片存在 CDN，只是想单纯的给图片加个占位符，通过几行 Css 便可达到效果。
实现方式为图片外层包裹块级元素相对定位，通过 padding bottom 控制比例，图片绝对定位。
...
figure {
padding-bottom:100%;
position: relative;
background-color: #eee;
img {
position: absolute;
max-width:100%;
}
}
...See the Pen yeEjpV by lacuna (@lacuna) on CodePen.
这种思路实际上在响应式视频上也能用到。前提是宽高比固定，宽度不定。
.img-holder\:1x1 { padding-bottom: 100%; }
.img-holder\:1x2 { padding-bottom: 200%; }
.img-holder\:2x1 { padding-bottom: 50%; }
.img-holder\:2x3 { padding-bottom: 150%; }
.img-holder\:3x2 { padding-bottom: 66.66%; }
.img-holder\:3x4 { padding-bottom: 133.333%; }
.img-holder\:4x3 { padding-bottom: 75%; }
.img-holder\:9x16 { padding-bottom: 177.777%; }
.img-holder\:16x9 { padding-bottom: 56.25%; }
.img-holder\:16x10 { padding-bottom: 62.5%; }针对不同尺寸，计算不同 padding-bottom, 很简单的方式，便可实现响应式图片占位符。
comments powered by Disqus