这个演示中使用HTML5和jQuer...,一起学习

作者: 前端  发布:2019-11-05

实现类似Pinterest 的图片预加载功能

2016/09/11 · JavaScript · 预加载

原文出处: Jack Pu   

提起Pinterest,大家第一印象可能是图片社交网站,里面有很多用户上传的各式各样的图片。从前端设计出发的话,我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天,给大家简要分析上 Pinterest上另外一项非常值得借鉴图片加载细节。

看看下面的截图:

9159.com 1

大家可以感觉到图片出来的时候预先绘制轮廓,重点是预制区域的颜色采用与图片较为相似的色彩值,当图片加载完全后,会有种渐入的效果。 效果体验

其中谷歌的图片搜索也用到了类似效果:

9159.com 2

我们称之为这种效果为Color Placeholder [色彩预置],当图片加载的时候,我们优先显示其所在容器的背景颜色(如同很多会显示一个加载的gif),由于受限于不同的图片和大小,因此相比与齐刷刷的加载gif,不同色块体验 可能 更好吧(至少Pinterest Google这么认为吧).

HTML页面

此实例是我一遍学习一边写出来的,希望能够帮到大家,一起学习。效果如图所示:

HTML5和jQuery制作网页灰度图片悬浮效果

在这个教程中,作者使用HTML5的canvas将针对网站图片做不同的灰度处理。这个演示中使用HTML5和jQuery的黄金组合来动态的克隆颜色来实现灰度效果。整个显示非常炫。是学习HTML5 canvas的不错实战教程。

9159.com 3

jQuery 代码:

  <script src="jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  // On window load. This waits until images have loaded which is essential

  $(window).load(function(){

  // Fade in images so there isn't a color "pop" document load and then on window load

  $(".item img").fadeIn(500);

  // clone image

  $('.item img').each(function(){

  var el = $(this);

  el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){

  var el = $(this);

  el.parent().css({"width":this.width,"height":this.height});

  el.dequeue();

  });

  this.src = grayscale(this.src);

  });

  // Fade image

  $('.item img').mouseover(function(){

  $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);

  })

  $('.img_grayscale').mouseout(function(){

  $(this).stop().animate({opacity:0}, 1000);

  });

  });

  // Grayscale w canvas method

  function grayscale(src){

  var canvas = document.createElement('canvas');

  var ctx = canvas.getContext('2d');

  var imgObj = new Image();

  imgObj.src = src;

  canvas.width = imgObj.width;

  canvas.height = imgObj.height;

  ctx.drawImage(imgObj, 0, 0);

  var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

  for(var y = 0; y < imgPixels.height; y++){

  for(var x = 0; x < imgPixels.width; x++){

  var i = (y * 4) * imgPixels.width + x * 4;

  var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;

  imgPixels.data[i] = avg;

  imgPixels.data[i + 1] = avg;

  imgPixels.data[i + 2] = avg;

  }

  }

  ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

  return canvas.toDataURL();

  }

       </script>

在这个教程中,作者使用HTML5的canvas将针对网站图片做不同的灰度处理。这个演示中使用HTML5和jQuer...

实现步骤

接下来我们进入正题,如何自己实现这样的动画加载效果(实现的方式肯定有很多的也欢迎大家提出更好的思路)

我们先定义下基本的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(图片中主要色彩)。

<!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>
9159.com,<body>

9159.com 4

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • javascript关于if语句优化的方法
  • 用jquery插件的图片剪切上传功能
  • Jquery实现图片的预加载与延时加载
  • Javascript中call和apply
  • Eclipse和MyEclipse有什么不同
  • sql语句联表查询,sql语句两表联查

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

设置背景的颜色

如果你用photoshop打开一张图片的话,你只需要几步就可以确定你希望得到的颜色: 滤镜 -> 模糊 -> 平均即可。

9159.com 5

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

寻找到一张图片较为明显的颜色,需要在三维空间中找到一些聚合的点。如果自己写的话,需要去了解一些聚合算法。当然自己并不打算去写更多的内容关于如何去进行图片的这些颜色的生成,这恐怕不是一篇文章能给说完的。实际上你安装ImageMagick就可以简单的实现预期效果:

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

1
convert path/or/url/to/image.png -resize 1x1 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>

对比图如下:

9159.com 6

因此借助程序,我们可以在保存图片的时候进行颜色采集,代码中通过先将图片进行大小调整,实际是出于性能的考虑。有助于节约运算时间。除此之外embed.ly也开放了对应的API,方便你获取网络图片的主要色彩。

如果我们能够有途径获取这样的颜色的话,自然整体功能就没有什么难度了。

<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</div>

html代码如下所示:

扩展

9159.com 7

其实除了纯粹的颜色背景外,我们还可能会遇到类似 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" />

如果你有兴趣,可以了解更为复杂的Facebook关于图片预加载的方案Facebook’s 200 byte technique

</body>
</html>

复制代码 代码如下:

参考

1 赞 3 收藏 评论

9159.com 8

 

<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);"/>

 

      <img id="img1" onclick=""/>
      <div class="mask3" onclick="javascript:jzk.ui.moveImg(3);"></div><!-- 增加三级遮罩 -->

CSS内容

      <img id="img2" onclick=""/>
      <div class="mask2" onclick="javascript:jzk.ui.moveImg(2);"></div><!-- 增加二级遮罩 -->

@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;}

      <img id="img3" onclick=""/>
      <div class="mask1" onclick="javascript:jzk.ui.moveImg(1);"></div><!-- 增加一级遮罩 -->

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

      <img id="img4" onclick=""/>

 

      <img id="img5" onclick=""/>
      <div class="mask5" onclick="javascript:jzk.ui.moveImg(-1);"></div><!-- 和mask1一样效果 -->

 

      <img id="img6" onclick=""/>
      <div class="mask6" onclick="javascript:jzk.ui.moveImg(-2);"></div><!-- 和mask2一样效果 -->

JS中index.js内容

      <img id="img7" onclick=""/>
      <div class="mask7" onclick="javascript:jzk.ui.moveImg(-3);"></div><!-- 和mask3一样效果 -->

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
}
];

      <img class="next" src="images/next.png" onclick="javascript:jzk.ui.moveImg(1);"/>
  </div>
  </body>
</html>

//需求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特效的方法

本文由9159.com发布于前端,转载请注明出处:这个演示中使用HTML5和jQuer...,一起学习

关键词: