对于Pinterest网站，从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节。
大家可以感觉到图片出来的时候预先绘制轮廓，重点是预制区域的颜色采用与图片较为相似的色彩值，当图片加载完全后，会有种渐入的效果。
我们称之为这种效果为Color Placeholder [色彩预置]，当图片加载的时候，我们优先显示其所在容器的背景颜色（如同很多会显示一个加载的gif），由于受限于不同的图片和大小，因此相比与齐刷刷的加载gif，不同色块体验 可能 更好吧(至少Pinterest Google这么认为吧).
接下来我们进入正题，如何自己实现这样的动画加载效果(实现的方式肯定有很多的也欢迎大家提出更好的思路)
再看下css设置
图片默认是透明度为0，当加载完成后设置为1就行啦。
})
大概基本思路就是这些，但是这里面最核心的就是确定所谓的Dominant Color(图片中主要色彩)。
完整示例如下：
<style type="text/css">
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 62.5%;
-webkit-tap-highlight-color: transparent
}
body {
font-family: 'Helvetica Neue','\5FAE\8F6F\96C5\9ED1','\9ED1\4F53',sans-serif;
letter-spacing: .01rem;
font-size: 15px;
line-height: 1.75em;
color: #3A4145;
-webkit-font-feature-settings: 'kern' 1;
-moz-font-feature-settings: 'kern' 1;
-o-font-feature-settings: 'kern' 1;
}
h1{
padding-top: 40px;
text-align: center;
}
.main{
width: 720px;
margin: 80px auto;
text-align: center;
}
.post{
margin: 10px;
font-size: 18px;
color:#666;
}
.title{
line-height: 30px;
}
.image-bg{
background: #e1e1e1;
}
img {
width:100%;
opacity: 0;
transition: opacity .2s ease-in .25s;
}
.loaded img {
opacity: 1;
}