Pinterest上别的一项非常值得借鉴图片加载细节

贯彻类似Pinterest 的图形预加载功效

2016/09/11 · JavaScript
· 预加载

初稿出处: Jack
Pu澳门太阳集团城网址 ,   

提及Pinterest,咱们第一影象恐怕是图表社交网址,里面有不知凡几客户上传的巨细无遗的图形。此前端设计出发的话,大家必定不会遗忘大家曾经那三个流行的瀑布流布局。可是前天,给我们简单剖判上
Pinterest上另外一项特别值得借鉴图片加载细节。

拜会上面包车型大巴截图:

澳门太阳集团城网址 1

大家能够以为到图片出来的时候预先绘制概略,入眼是预制区域的颜色采取与图片较为通常的色彩值,当图片加载完全后,会有种渐入的职能。
澳门太陽城集团登录网址 ,效果体验

里面谷歌(Google)的图纸检索也使用了近似功效:

澳门太阳集团城网址 2

咱俩称为这种成效为Color Placeholder
[情调预置],当图片加载的时候,大家先行显示其所在容器的背景颜色(就像是相当多会展现一个加载的gif),由于受限于差别的图样和大小,由此对待与齐刷刷的加载gif,差别色块体验
只怕 更加行吗(最少Pinterest 谷歌这么以为吧).

落成步骤

接下去我们步入正题,如何团结完成那样的动画片加载效果(达成的法子自然有为数不少的也应接大家建议更加好的笔触)

咱俩先定义下基本的html结构

XHTML

<!–三个post充当贰个单位–> <div class=”post”> <div
class=”image-bg” style=”background-color:#141646″> <img
width=”310″ height=”242″
src=””
/> </div> <p class=”title”>Mars</p> </div>

1
2
3
4
5
6
7
<!–一个post当作一个单位–>  
<div class="post">  
  <div class="image-bg" style="background-color:#141646">
    <img width="310" height="242" src="https://mir-s3-cdn-cf.behance.net/projects/404/89388038777855.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" />
  </div>
  <p class="title">Mars</p>
</div>

再看下css设置

CSS

.image-bg{ background: #e1e1e1; } img { width:100%; opacity: 0;
transition: opacity .2s ease-in .25s; } .loaded img { opacity: 1; }

1
2
3
4
5
6
7
8
9
10
11
12
.image-bg{
    background: #e1e1e1;
  }
  img {
    width:100%;
    opacity: 0;
    transition: opacity .2s ease-in .25s;
 
  }
  .loaded img {
    opacity: 1;
  }

图表暗中同意是折射率为0,当加载成功后安装为1就行啊。

JavaScript

$(function() { $(‘.post img’).each(function() { var el = this; var image
= new Image(); image.src = el.src; image.onload = function() {
$(el).parent().addClass(‘loaded’); } }) })

1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
    $(‘.post img’).each(function() {
       var el = this;
       var image = new Image();
       image.src = el.src;
 
       image.onload = function() {
         $(el).parent().addClass(‘loaded’);
       }
    })
 
  })

DEMO

大约基本思路正是那个,可是那在那之中最核心的就是鲜明所谓的Dominant
Color(图片中首要色彩)。

安装背景的颜色

Pinterest上别的一项非常值得借鉴图片加载细节。一旦您用photoshop张开一张图片的话,你只须要几步就足以规定你希望得到的颜色:
滤镜 -> 模糊 -> 平均就可以。

澳门太阳集团城网址 3

道理当然是那样的这是针对你所能管理的图样,固然面前境遇海量的图片的话,那个时候我们必要用程序去落到实处。

检索到一张图纸较为鲜明的颜料,须要在三个维度空间中找到一些凑合的点。借使谐和写的话,必要去探听一些Pinterest上别的一项非常值得借鉴图片加载细节。集合算法Pinterest上别的一项非常值得借鉴图片加载细节。。当然自个儿并不希图去写越多的开始和结果关于怎么样去开展图纸的那么些颜色的变迁,那或者不是一篇文章能给讲罢的。实际上你安装ImageMagick就能够回顾的兑现预期功效:

convert path/or/url/to/image.png -resize 1×1 txt:-

1
convert path/or/url/to/image.png -resize 1×1 txt:-

可是那些不太相符大家写程序的。大家得以采纳第三方的npm
gm

JavaScript

var gm = require(‘gm’); gm(‘demo1.png’) .resize(120, 120) .colors(1)
.toBuffer(‘RGB’, function (error, buffer) { console.log(buffer.slice(0,
3)); });

1
2
3
4
5
6
7
8
var gm = require(‘gm’);
 
gm(‘demo1.png’)  
    .resize(120, 120)
    .colors(1)
    .toBuffer(‘RGB’, function (error, buffer) {
        console.log(buffer.slice(0, 3));
    });

运维输出效果如下:

Shell

~ node gm.js ./demo1.png: <Buffer 34 29 3b> ./demo2.png:
<Buffer cf c3 ad>

1
2
3
4
5
~ node gm.js
./demo1.png:
<Buffer 34 29 3b>  
./demo2.png:
<Buffer cf c3 ad>

相比较图如下:

澳门太阳集团城网址 4

所以借助程序,大家能够在保留图片的时候实行颜色搜罗,代码中通过先将图纸展开高低调度,实际是由于品质的虚构。有辅助节约运算时间。除了那个之外embed.ly也开放了对应的API,方便你拿走互联网图片的显要色彩。

假使大家可以有门路得到那样的颜料的话,自然全部效果就不曾什么样难度了。

扩展

澳门太阳集团城网址 5

实际重三了纯粹的颜色背景外,大家还会遇到类似 medium
的图片(参照他事他说加以考察上海教室)预加载手艺,才起来图片是混淆的。实际上大家得以经过插件生成一张几素的小图片,然后选取上高四歪曲滤镜,然后等待原图加载完结后,我们在凸显原本的图样。

JavaScript

var gm = require(‘gm’); gm(‘demo1.png’) .resize(4, 4) .toBuffer(‘GIF’,
function (error, buffer) { console.log(‘data:image/gif;base64,’ +
buffer.toString(‘base64’)); });

1
2
3
4
5
6
7
var gm = require(‘gm’);
 
gm(‘demo1.png’)  
    .resize(4, 4)
    .toBuffer(‘GIF’, function (error, buffer) {
        console.log(‘data:image/gif;base64,’ + buffer.toString(‘base64’));
    });

XHTML

<div class=”image-bg” style=”background-color:#141646″> <img
src=”data:image/gif;base64,R0lGODlhBAADAPMJACwlPjAmPDUqOzgrOgQPSgkSShAVRhEWRplcFsR3EAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAEAAMAAAQJ0″
width=”310″ height=”242″
real-src=””
/>

1
2
<div class="image-bg" style="background-color:#141646">  
    <img  src="data:image/gif;base64,R0lGODlhBAADAPMJACwlPjAmPDUqOzgrOgQPSgkSShAVRhEWRplcFsR3EAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAEAAMAAAQJ0" width="310" height="242" real-src="https://mir-s3-cdn-cf.behance.net/projects/404/89388038777855.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" />

尽管你有意思味,能够明白进一步复杂的推特(TWTR.US)关于图片预加载的方案Facebook’s
200 byte
technique

参考

1 赞 3 收藏
评论

澳门太阳集团城网址 6

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图