对于Pinterest网站，从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节。
看看下面的截图:
大家可以感觉到图片出来的时候预先绘制轮廓，重点是预制区域的颜色采用与图片较为相似的色彩值，当图片加载完全后，会有种渐入的效果。
其中谷歌的图片搜索也用到了类似效果:
我们称之为这种效果为Color Placeholder [色彩预置]，当图片加载的时候，我们优先显示其所在容器的背景颜色（如同很多会显示一个加载的gif），由于受限于不同的图片和大小，因此相比与齐刷刷的加载gif，不同色块体验 可能 更好吧(至少Pinterest Google这么认为吧).
实现步骤
接下来我们进入正题，如何自己实现这样的动画加载效果(实现的方式肯定有很多的也欢迎大家提出更好的思路)
我们先定义下基本的html结构
<!--一个post当作一个单位--> <div> <div> <img src="https://mir-s3-cdn-cf.behance.net/projects/404/89388038777855.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" /> </div> <p>Mars</p> </div>
再看下css设置
.image-bg{ background: #e1e1e1; } img { width:100%; opacity: 0; transition: opacity .2s ease-in .25s; } .loaded img { opacity: 1; }
图片默认是透明度为0，当加载完成后设置为1就行啦。
$(function() { $('.post img').each(function() { var el = this; var image = new Image(); image.src = el.src; image.onload = function() { $(el).parent().addClass('loaded'); } }) })
大概基本思路就是这些，但是这里面最核心的就是确定所谓的Dominant Color(图片中主要色彩)。
完整示例如下：
<!doctype html> <html lang="en"> <head> <title>实现类似Pinterest 的图片预加载功能</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0, user-scalable=no"> <link href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" /> <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; } </style> <script src="https://s1.vued.vanthink.cn/jquery-1.10.2.min.js"></script> </head> <body> <h1>实现类似Pinterest 的图片预加载功能</h1> <div> <div> <div> <div> <img src="https://mir-s3-cdn-cf.behance.net/projects/404/89388038777855.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" /> </div> <p>Mars</p> </div> </div> <div> <div> <div > <img src="https://mir-s3-cdn-cf.behance.net/projects/404/1f430b36513911.Y3JvcCw4MjEsNjQyLDEwMSwzMA.jpg" /> </div> <p>Grass</p> </div> </div> <div> <div> <div > <img src="https://mir-s3-cdn-cf.behance.net/projects/404/4bfb7136056367.Y3JvcCw5NTgsNzQ5LDIyMCwyNg.jpg" /> </div> <p>journet to the west2</p> </div> </div> <div> <div> <div > <img src="https://mir-s3-cdn-cf.behance.net/projects/404/96ed6c36255639.Y3JvcCw1NDksNDI5LDEyNiwxODU.png" /> </div> <p>Marriage</p> </div> </div> <div> <div> <div > <img src="https://mir-s3-cdn-cf.behance.net/projects/404/ce4a4336970823.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" /> </div> <p>Birthday Card</p> </div> </div> <div> <div> <div > <img src="https://mir-s3-cdn-cf.behance.net/projects/404/fa5dec36514827.Y3JvcCwxMDk1LDg1Niw0ODUsMTY.png" /> </div> <p>Cup</p> </div> </div> </div> <script type="text/javascript"> $(function() { $('.post img').each(function() { var el = this; var image = new Image(); image.src = el.src; image.onload = function() { $(el).parent().addClass('loaded'); } }) }) </script> </body> </html>
设置背景的颜色
如果你用photoshop打开一张图片的话，你只需要几步就可以确定你希望得到的颜色: 滤镜 -> 模糊 -> 平均即可。
当然这是针对你所能处理的图片，如果面对海量的图片的话，这个时候我们需要用程序去实现。