心想事成类似Pinterest 的图形预加载作用

2016/09/11 · JavaScript
· 预加载

初稿出处： Jack
Pu

提起Pinterest，我们第一映像可能是图表社交网站，里面有众多用户上传的应有尽有的图纸。以前端设计出发的话，大家自然不会忘记大家曾经那么些流行的瀑布流布局。不过前日，给大家不难分析上
Pinterest上别的一项越发值得借鉴图片加载细节。

看看上面的截图:

美高梅开户网址 1

世家能够感觉到到图片出来的时候预先绘制概况，重点是预制区域的颜色选拔与图片较为相像的色彩值，当图片加载完全后，会有种渐入的法力。
职能体验

里面谷歌（谷歌）的图样检索也运用了类似作用:

美高梅开户网址 2

咱俩称为那种功用为Color Placeholder
[色彩预置]，当图片加载的时候，大家先行突显其所在容器的背景颜色（似乎很多会显示一个加载的gif），由于受限于不相同的图形和大小，因而对待与齐刷刷的加载gif，差异色块体验
可能更好吧(至少Pinterest 谷歌（Google）这么觉得吧).

HTML页面

插件代码

此实例是本身三遍学习一边写出来的，希望可以帮到大家，一起念书。效果如图所示：

贯彻步骤

接下去大家进来正题，如何团结落成如此的卡通片加载效果(达成的办法必然有成百上千的也欢迎大家提议更好的笔触)

咱俩先定义下基本的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>

<!–一个post当作一个单位–>

</div>

</div>

再看下css设置

CSS

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

.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’); } }) })

$(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(图片中至关首要色彩)。

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>旋转木马轮播图</title>
<link rel=”stylesheet” href=”css/css.css”/>
<!–先引工具包,在引逻辑包–>
<script src=”js/jquery-1.11.1.js”></script>
<script src=”js/index.js”></script>
</head>
<body>

复制代码代码如下:

美高梅开户网址 3

安装背景的颜料

一旦您用photoshop打开一张图纸的话，你只必要几步就可以确定你期望获得的水彩:
滤镜 -> 模糊 -> 平均即可。

美高梅开户网址 4

自然那是针对你所能处理的图片，若是面对海量的图纸的话，这一个时候咱们须要用程序去完结。

找寻到一张图纸较为明确的颜色，须要在三维空间中找到一些会见的点。倘诺协调写的话，需求去询问一些集合算法。当然自己并不打算去写更加多的内容关于怎么样去开展图纸的那么些颜色的扭转，那或者不是一篇小说能给说完的。实际上你安装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)); });

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>

~ node gm.js

./demo1.png:

./demo2.png:

比较图如下：

美高梅开户网址 5

所以借助程序，我们可以在保留图片的时候举行颜色采集，代码中通过先将图片举办高低调整，实际是出于质量的考虑。有助于节约运算时间。除此之外embed.ly也开放了对应的API，方便你拿走网络图片的重大色彩。

即使大家可以有门路取得那样的颜色的话，自然整体作用就一贯不什么样难度了。

/*

name: UserGuider
authors:

Garland Yang
requires: [Core/Class, Core/Element.Style, Core/Element.Event,
Core/Element.Dimensions]
version:
1.0
…
*/
var UserGuider = new Class({
Implements: [Options, Events],
options: {
UserGuideList: new Array(),
step: 0
},
initialize: function (options) {
this.setOptions(options);
this.step = this.options.step;
},
createGuide: function () {
var self = this;
$$(‘.userGuide’).dispose();
var UserGuideList = this.options.UserGuideList;
var config = UserGuideList[this.step];
if (config == null) {
return;
}
var ele = $$(‘.’ + config.className)[0];
if (ele == null) {
return;
}
$$(‘.’ + config.className + ‘ a’).set(‘target’, ‘_blank’);
var top = ele.getCoordinates().top;
var right = ele.getCoordinates().right;
var bottom = ele.getCoordinates().bottom;
var left = ele.getCoordinates().left;
var width = ele.getCoordinates().width;
var height = ele.getCoordinates().height;
var x = window.getScrollSize().x;
var y = window.getScrollSize().y;
this.createShadowDiv(‘shadowTop’, left, 0, width, top);
this.createShadowDiv(‘shadowRight’, right, 0, x – right, y);
this.createShadowDiv(‘shadowButtom’, left, bottom, width, y – bottom);
this.createShadowDiv(‘shadowLeft’, 0, 0, left, y);
的图样预加载作用，javascript实例分享。if (config.src != null) {
this.createUserGuideImg(left + config.imgLeft, top + config.imgTop,
config.src);
}
if (config.navUrl != null) {
this.createUserGuideNavImg(right – 50, bottom, config.navUrl);
}
if (this.step > 0) {
this.createUserButton(‘userguide_undo’, ‘UserGuide/undo.png’, this.step
1);
}
if (this.step < UserGuideList.length – 1) {
this.createUserButton(‘userguide_next’, ‘UserGuide/next.png’, this.step
1);
}
this.createUserButton(‘userguide_finish’, ‘UserGuide/finish.png’,
10000);
this.changeUserGuideButton();
if (config.src2 != null) {
this.createUserGuideImg(left + config.imgLeft2, top + config.imgTop2,
config.src2);
}
return this;
},
createShadowDiv: function (id, left, top, width, height) {
var self = this;
var div = new Element(‘div’);
div.set(‘id’, id);
div.addClass(‘userGuide’);
div.setStyles({
left: left + ‘px’,
top: top + ‘px’,
width: width + ‘px’,
height: height + ‘px’,
position: ‘absolute’,
‘background-color’: ‘#000’,
‘z-index’: 100,
opacity: 0.5,
filter: ‘alpha(opacity=50)’
});
$$(‘body’).adopt(div);
return this;
},
createUserGuideNavImg: function (left, top, nav) {
var self = this;
var img = new Element(‘img’);
img.addClass(‘userGuideNav’);
img.addClass(‘userGuide’);
img.setStyles({
cursor: ‘pointer’,
‘z-index’: 10000,
left: left + ‘px’,
top: top + ‘px’,
position: ‘absolute’
});
img.set(‘src’, ‘userguide/nav.png’);
img.addEvent(‘click’, function () {
window.open(nav);
});
$$(‘body’).adopt(img);
return this;
},
createUserGuideImg: function (left, top, src) {
var self = this;
var img = new Element(‘img’);
img.addClass(‘userGuideImg’);
img.addClass(‘userGuide’);
img.setStyles({
‘z-index’: 1000,
left: left + ‘px’,
top: top + ‘px’,
position: ‘absolute’
});
img.set(‘src’, src);
$$(‘body’).adopt(img);
return this;
},
createUserButton: function (className, src, thisStep) {
var self = this;
var img = new Element(‘img’);
img.addClass(className);
img.addClass(‘userGuide’);
img.setStyles({
cursor: ‘pointer’,
‘z-index’: 1000000,
position: ‘absolute’
});
img.set(‘src’, src);
img.addEvent(‘click’, function () {
self.step = thisStep;
self.createGuide();
});
$$(‘body’).adopt(img);
return this;
},
changeUserGuideButton: function () {
var self = this;
var size = window.getSize();
var scroll = window.getScroll();
var scrollSize = window.getScrollSize();
$$(‘.userguide_finish’).setStyles({
left: (size.x – 220) + ‘px’,
top: (size.y + scroll.y – 80) + ‘px’
});
$$(‘.userguide_next’).setStyles({
left: (size.x – 420) + ‘px’,
top: (size.y + scroll.y – 80) + ‘px’
});
$$(‘.userguide_undo’).setStyles({
left: (size.x – 620) + ‘px’,
top: (size.y + scroll.y – 80) + ‘px’
});
return this;
}
});

调用格局

复制代码代码如下:

var UserGuider;
var UserGuideList = new Array({
className: ‘step0’,
src: ‘UserGuide/step0.png’,
imgTop: 50,
imgLeft: 50
}, {
className: ‘step1’,
src: ‘UserGuide/step1.png’,
imgTop: -150,
imgLeft: 0,
src2: ‘UserGuide/pic/1.gif’,
imgTop2: 210,
imgLeft2: 450
}, {
className: ‘step2’,
src: ‘UserGuide/step2.png’,
imgTop: 0,
imgLeft: -600,
navUrl: ‘/MyMessageCenter.aspx’,
src2: ‘UserGuide/pic/2.gif’,
imgTop2: 110,
imgLeft2: 80
}, {
className: ‘step3’,
src: ‘UserGuide/step3.png’,
imgTop: -150,
imgLeft: 130,
navUrl: ‘/MyTaskSearch.aspx’,
src2: ‘UserGuide/pic/3.png’,
imgTop2: -120,
imgLeft2: 250
});
window.addEvent(‘domready’,function(){
UserGuider = new UserGuider({
UserGuideList: UserGuideList
})
UserGuider.createGuide();
});

html代码如下所示：

扩展

美高梅开户网址 6

实际不外乎纯粹的颜料背景外，大家还可能会蒙受类似 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’)); });

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

若果您有趣味，可以领悟进一步复杂的非死不可关于图片预加载的方案Facebook’s
200 byte
technique

</body>
</html>

您可能感兴趣的稿子:

jquery
插件已毕图片延迟加载效果代码
js loading加载效果落到实处代码
js控制的遮罩层实例介绍
jquery下完毕overlay遮罩层代码
JS遮罩层效果包容ie firefox
jQuery遮罩层
JQuery
遮罩层落成(mask)达成代码
Javascript
遮罩层和加载效果代码

复制代码代码如下:

参考

1 赞 3 收藏
评论

美高梅开户网址 7

<html xmlns=”” xml:lang=”en”
lang=”en”>
<head>
    <title>图片浏览工具制造</title>
    <script type=”text/javascript”
src=”js/main.js”></script>
    <link rel=”stylesheet” type=”text/css” href =
“style/css.css”>
</head>
<body>
<div id=”pic_browser”>
      <img class=”prev” src=”images/prev.png”
onclick=”javascript:jzk.ui.moveImg(-1);”/>

CSS内容

@charset “UTF-8”;
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 “Microsoft YaHei”,
“微软雅黑”, SimSun, “燕体”, sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.wrap{
width:1200px;
margin:10px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
opacity: 0;
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(..prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(..next.png);
}

JS中index.js内容

jQuery(function () {
//旋转木马的逻辑包
//旋转木马思路：点击左侧或者右边按钮，移动样式或者移动li标签的职位;
var arrOfJson = [
{ // 1
width:400,
top:70,
left:50,
opacity:0.2,
“z-index”:2
},
{ // 2
width:600,
top:120,
left:0,
opacity:0.8,
“z-index”:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:1,
“z-index”:4
},
{ // 4
width:600,
top:120,
left:600,
opacity:0.8,
“z-index”:3
},
{ //5
width:400,
top:70,
left:750,
opacity:0.2,
“z-index”:2
}
];

//需要1：页面加载的时候所有li标签根据arrOfJson中的样式滑动过去;
//鼠标进入显示左右按钮，移开隐藏;（用opacity控制）
//必要2：点击左边按钮，删除数组中的第四个，添加到最末尾;
//要求3：点击左侧按钮，逻辑相反;

css代码如下：

//要求1：页面加载的时候所有li标签根据arrOfJson中的样式滑动过去;
//鼠标进入突显左右按钮，移开隐藏;（用opacity控制）
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).css(“z-index”,arrOfJson[index][“z-index”]);
});
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).animate(arrOfJson[index],400);
})

此处的mask1、2、3…..是覆盖几张相片的一个div，用opacity属性来定义透明度，可以落成一种朦胧感，让外观尤其美妙。

$(“#slide”).mouseenter(function () {
$(“#arrow”).animate({“opacity”:1});
})
$(“#slide”).mouseleave(function () {
$(“#arrow”).animate({“opacity”:0});
美高梅开户网址，})
//需要2：点击右边按钮，删除数组中的第三个，添加到最末尾;
$(“.next”).on(“click”, function () {
//删除数组中的第一个，添加到最末尾;
var first = arrOfJson.shift();
arrOfJson.push(first);
//安装新数组在加载一遍;
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).css(“z-index”,arrOfJson[index][“z-index”]);
});
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).stop().animate(arrOfJson[index],400);
})
});
//需要3：点击左侧按钮，逻辑相反;
$(“.prev”).on(“click”, function () {
//删除数组中的最终一个，添加到最后边;
var last = arrOfJson.pop();
arrOfJson.unshift(last);
//安装新数组在加载两遍;
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).css(“z-index”,arrOfJson[index][“z-index”]);
});
$(“#slide li”).each(function (index,ele) {
//ele是DOM元素;
$(ele).stop().animate(arrOfJson[index],400);
})
});
})

复制代码代码如下:

body {width: 1340px;height: 500px;background:
url(../images/body_bg.gif) no-repeat;}
#pic_browser {width: 860px;height: 192px; position:
relative;margin:130px 106px;}
#pic_browser img{position: absolute;border: none;}

.prev {top:76px;left: 0px; }
#img1, .mask3 {width: 106px;height: 70px;left: 45px;top: 61px;z-index:
4;}
#img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index:
5;}
#img3, .mask1 {width: 226px;height: 150px;left: 175px;top:
21px;z-index: 6;}
#img4 {width: 290px;height: 192px;left: 285px;top: 0px;z-index: 7;}
#img5, .mask5 {width: 226px;height: 150px;right: 175px;top:
21px;z-index: 6;}
#img6, .mask6 {width: 166px;height: 110px;right: 95px;top:41px;z-index:
5;}
#img7, .mask7 {width: 106px;height: 70px;right: 45px;top: 61px;z-index:
4;}
.next {top:76px;right: 0px;}

.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {background:
#fff;position: absolute;}
.mask1, .mask5 {opacity: 0.3;}
.mask2, .mask6 {opacity: 0.5;}
.mask3, .mask7 {opacity: 0.7;}

js代码如下：

复制代码代码如下:

window.onload = function()
{
jzk.app.initImg();
}

var imgArray = new Array();
imgArray[0] = ‘images/1.jpg’;
imgArray[1] = ‘images/2.jpg’;
imgArray[2] = ‘images/3.jpg’;
imgArray[3] = ‘images/4.jpg’;
imgArray[4] = ‘images/5.jpg’;
imgArray[5] = ‘images/6.jpg’;
imgArray[6] = ‘images/7.jpg’;
var base=0;

var jzk = {}; /*概念命名空间*/

jzk.tools = {};/*分段第一层*/

jzk.ui = {};/*分层第二层*/
jzk.ui.moveImg = function(offset)
{
    base= (base-offset);
    for(var i = base;i< base +7;i++)/*定义i为数组下标的变量*/
    {
        var img =
document.getElementById(‘img’+(i-base+1));/*保证img变量为img1、img2、img3…直到img7这7个img元素*/
        if(i<0) /*数组下标i<0,表达offset>0，*/
        {
            img.src =imgArray[imgArray.length+i];
        }
        else if(i>imgArray.length-1)
        {
            img.src =imgArray[i-imgArray.length];
        }
        else
        {
            img.src = imgArray[i];
        }
    }
}

jzk.app = {}; /*分段第三层*/
jzk.app.initImg =
function()/*初阶化彰显图片,也就是调用函数moveImg进度：参数为7，base等于-7，i等于-7，-6，-5，-4，-3,-2,-1那7个值，对应的要素为img1，img2，…img7，所以有：img1=imgArray[-7+7],img2=imgArray[-6+7]….*/
{
jzk.ui.moveImg(7);/*开班参数应该设为：能突显的张数(此处为7)；*/
}
三个公文，属js代码相比难了解，上边我也付出了详尽的笺注，若是还有何人看了不懂的，可以在上边评论中研究。

你或许感兴趣的稿子:

javascript完毕带节日和阴历的日历特效
一个JavaScript的求爱小特效
纯JavaScript落成HTML5
Canvas多种特效滤镜示例
23个Javascript弹出窗口特效整理
javascript
打字效果的文字特效
JavaScript妙味课堂
物体平滑移动特效
javascript:google
向上向下滚动特效,包容IE6,7,8,FF
javascript
可控式透明特效落成代码
JavaScript 地震特效
同一个网页中已毕多少个JavaScript特效的章程

的图样预加载作用，javascript实例分享

心想事成类似Pinterest 的图形预加载作用