JavaScript模仿Pinterest实现图片预加载功能

序

对于Pinterest网站来说，如果从前端设计开始，我们永远不会忘记曾经非常流行的瀑布流布局。但是今天我给大家简单分析一下Pinterest上的另一个图片加载细节，值得借鉴。

看看下面的截图：

画面出来就能感觉到轮廓是提前画好的。关键是预制区的颜色和图片的颜色差不多。当图片满载时，会有渐变的效果。

其中，谷歌的图片搜索也使用了类似效果的：

我们称这种效果为颜色占位符。加载图片时，我们会优先显示其容器的背景颜色(就像许多人会显示加载的gif一样)。由于图片和大小不同的限制，不同色块的体验可能比统一加载的gif要好(至少Pinterest Google是这么认为的)。

实施步骤

接下来进入正题，如何自己实现这种动画加载效果(当然实现的方法有很多，欢迎大家提出更好的想法)

让我们首先定义基本的html结构

！-作为一个单元的帖子-div class=' post ' div class=' image-BG ' style=' background-color : # 141646 ' img width=' 310 ' height=' 242 ' src=' http :https://mir-S3-cdn-cf . behavior . net/project/404/8938803877855 . y3jvccxmdk1 ldg 1 niwyntismje . png '。image-BG { background : # E1 E1；} img { width :100%；opa city 3360 0；transition:不透明度. 2s缓和. 25s} .已加载img { opa city 3360 1；}图片的透明度默认为0，加载后可以设置为1。

$(function() { $(')。发布img’)。每个(函数(){ var el=thisvar image=新图像()；image . src=El . src；image.onload=function() { $(el)。父项()。addClass('已加载')；}})})这大概是基本思路，但核心是确定所谓的主色。

完整的示例如下：

！doctype html html lang=' en '标题实现类似拼趣的图片预加载功能/title meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible '内容=' IE=edge ' meta name=' viewport '内容=' width=device-width，initial-scale=1.0，user-scale=no ' link rel='样式表href='//cdn。jsdeliver。net/bootstrap/3。3 .6/CSS/bootstrap。量滴CSS '/style type=' text/CSS ' html { font-family 3360 sans-serif-ms-text-size-adjust : 100%；-网页套件-文字-尺寸-调整： 100%；字号： 62.5%；-web kit-tap-highlight-color : transparent } body { font-family : ' Helvetica Neue '，' \5FAE\8F6F\96C5\9ED1 '，' \9ED1\4F53 '，无衬线；字母间距：01 remfont-size : 15px线高： 1.75 emcolor : # 3A 4145-网页套件-字体-功能-设置： ' kern ' 1；-moz-font-feature-settings : ' kern ' 1；-o-font-feature-settings : ' kern ' 1；} h1 { padding-top : 40px；文本对齐：中心；} .主{宽度： 720pxmargin: 80px自动；文本对齐：中心；} .post { margin : 10px font-size : 18px；color: # 666}。标题{行高： 30px} .image-BG {背景： # E1 E1；} img { width :100%；opa城市3360 0；过渡：不透明度。2s缓和。25s}。已加载img { opa city 3360 1；}/style脚本src=' http://S1。呜呜呜。vant hink。cn/jquery-1。10 .2 .量滴js '/script/head body class=' doc ' h1实现类似拼趣的图片预加载功能/h1 div class=' main row ' div class=' col-MD-6 ' div class=' post ' div class=' image-BG ' style=' background-color : # 141646 ' img width=' 310 ' height=' 242 ' src=' http :https://mir-S3-cdn-cf . behance。网络/项目/404/893803877855 .y3jvccwxmdk1 ldg 1 niwyntismje。png '/div p class=' title ' mars/p/div/div class=' col-MD-6 ' div class=' post ' div class=' image-BG ' style='底色： # 3e 90 DC；'img width=' 310 ' height=' 242 ' src=' http :3359 mir-S3-cdn-cf . behance。净额/项目/404/1f 430 b 36513911 .y3jvccw4 mjesnjqyldewmswzma。jpg '/div p class=' title ' grass/p/div/div class=' col-MD-6 ' div class=' post ' div class=' image-BG ' style='底色： # 09171 e；img width=' 310 ' height=' 242 ' src=' http :3359 mir-S3-cdn-cf . behance。net/projects/404/4 bfb 7136056367 .y3jvccw5 ntgsnzq 5 ldiycwyng。jpg '/div p class=' title '向西行进2/p/div/div class=' col-MD-6 ' div class=' post ' div class=' image-BG ' style='底色： # d4cab 1；img width=' 310 ' height=' 242 ' src=' http :https://mir-S3-cdn-cf . behance。net/projects/404/96 ed 6 c 36255639 .y3jvccw1nd ksndi5ldeyniwxodu。png '/div p class=' title '婚姻/p/div/div class=' col-MD-6 ' div class=' post ' div class=' image-BG ' style=' background-color : # fff8fa；img width=' 310 ' height=' 242 ' src=' http :3359 mir-S3-cdn-cf . behance。net/projects/404/ce 4a 4336970823 .y3jvccwxmdk1 ldg 1 niwyntismje。png '/div p class=' title '生日卡/p/div/div class=' col-MD-6 ' div class=' post ' div class=' image-BG ' style='底色： # fff'img width=' 310 ' height=' 242 ' src=' http :3359 mir-S3-cdn-cf . behance。net/projects/404/fa5 dec 36514827 .y3jvccwxmdk 1 ldg1niw 0 odusmty。png '/div p class=' title ' cup/p/div/div脚本类型=' text/JavaScript ' $(function(){ $().发布img ').每个（函数(){ var el=thisvar image=新图像();图像。src=El。srcimage.onload=function() { $(el).父项()。addClass(')已加载');} })})/脚本/正文/html设置背景的颜色

如果你用用计算机修改（图片或照片)打开一张图片的话，你只需要几步就可以确定你希望得到的颜色： 滤镜-模糊-平均即可。

当然这是针对你所能处理的图片，如果面对海量的图片的话，这个时候我们需要用程序去实现。

要找到图片明显的颜色，需要在三维空间中找到一些聚合点。如果是自己写的，需要了解一些聚合算法。当然，我也不打算多写如何生成这些颜色的图片，恐怕一篇文章写不完。事实上，您只需安装ImageMagick就可以达到所需的效果：

convert path/or/URL/to/image . png-resize 1x txt :-但这不适合我们的编程。我们可以使用第三方npm gm

var GM=require(' GM ')；gm('demo1.png ')。调整大小(120，120)。颜色(1)。toBuffer('RGB '，函数(错误，缓冲区){ console.log(buffer.slice(0，3))；});操作输出效果如下：

~ nodegm . js/demo 1 . png : buffer 34 29 3b。/demo2.png:buffer cfc3ad对比图如下：

因此，在程序的帮助下，我们可以在保存图片时收集颜色。在代码中，我们首先调整图片的大小，这实际上是出于性能的考虑。有助于节省操作时间。另外，embed.ly还打开了相应的API，方便你获取网络图片的主色调。

如果我们能接触到这样的颜色，自然的整体功能就不会有困难。

发展

其实除了纯色背景之外，我们可能还会遇到类似于介质的图片的预加载技术(参考上图)，一开始图片是模糊的。其实我们可以通过插件生成一个有几个元素的小图片，然后应用高级四模糊滤镜，然后等待原图加载，然后我们就会显示原图。

var GM=require(' GM ')；gm('demo1.png ')。调整大小(4，4)。toBuffer('GIF '，函数(错误，缓冲区){ console . log(' data : image/GIF；base64，' buffer . tostring(' base64 ')；});div class=' image-BG ' style=' background-color : # 141646 ' img src=' http : data : image/gif；base64，r0lgodlhbaadapmjacwlpjampduqozgrogqpsgksshavrhewplcfsr 3 eaaaaaaaaaaaaaaaaaaaaaaaaaaaaaqj 0 ' width=' 310 ' height=' 242 ' real-src=' http3 3360https://mir-S3-cdn-cf . behavior . net/projects/404/893803877855 . y3jvccxmdk1

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。