我不会抽烟 的BLOG
用户名：我不会抽烟
文章数：78
评论数：106
访问量：66647
注册日期：
阅读量：5863
阅读量：12276
阅读量：396625
阅读量：1087201
51CTO推荐博文
4月的时候公司比较闲，就想着自己做点东西，其实主要是为了更加熟悉.Net，毕竟接触的时间不长，趁着有时间想提高提高。不过当我做到图片上传这个功能的时候，就有些停滞不前了，连续写了两天也达不到自己想要的标准。后来公司来活，然后就没有然后了，然而做事总不能半途而废吧~时隔一个多月，趁着这个周末，我再次拾起了这个项目，而首要工作就是攻破这个图片上传控件。下面说说我的标准是什么子的吧~1、最多可以上传三张图片，超过三张有提示。2、点击图片小图，有图片放大功能，再次点击，图片恢复原来尺寸。3、在图片数量范围内，可对图片任意添加，Delete。看似都是很普通的功能吧，确实如此，只是对.Net自带的FileUpload进行了小小的扩展。不过我就是在第3条上遇到了问题，主要还是对页面刷新机制不了解和没有确定好实现的方法以及不太熟悉自定义控件，不过现在问题都解决了。在给大伙儿说说实现方法之前，先看看效果，没有美化，单看功能。1、初始状态650) this.width=650;" src="/wyfs02/M02/2D/37/wKiom1OVWkjSo6JDAAAkYZJ9oU4472.jpg" title="QQ图片18.jpg" alt="wKiom1OVWkjSo6JDAAAkYZJ9oU4472.jpg" />2、选择文件650) this.width=650;" src="/wyfs02/M01/2D/38/wKioL1OVWi6RXHPuAAIG4nxIohk964.jpg" title="QQ图片58.jpg" alt="wKioL1OVWi6RXHPuAAIG4nxIohk964.jpg" /> 3、上传图片650) this.width=650;" src="/wyfs02/M00/2D/38/wKioL1OVWnGwza6aAABN_VAdutA115.jpg" title="QQ截图55.png" alt="wKioL1OVWnGwza6aAABN_VAdutA115.jpg" /> 4、查看图片650) this.width=650;" src="/wyfs02/M00/2D/38/wKioL1OVWvrApI5uAAQ9cPEOSzQ882.jpg" title="QQ截图27.png" width="375" height="507" border="0" hspace="0" vspace="0" style="width:375height:507" alt="wKioL1OVWvrApI5uAAQ9cPEOSzQ882.jpg" />5、Delete图片650) this.width=650;" src="/wyfs02/M00/2D/38/wKiom1OVWsTgDaO4AABA3XzhCag260.jpg" title="QQ截图21.png" alt="wKiom1OVWsTgDaO4AABA3XzhCag260.jpg" />6、重新添加650) this.width=650;" src="/wyfs02/M01/2D/38/wKiom1OVWuLhYHuSAABLkAqoFqs703.jpg" title="QQ截图28.png" alt="wKiom1OVWuLhYHuSAABLkAqoFqs703.jpg" />7、提示情况650) this.width=650;" src="/wyfs02/M01/2D/38/wKioL1OVWs-QJYUQAAA7WqJhkrk799.jpg" style="float:" title="QQ图片24.jpg" alt="wKioL1OVWs-QJYUQAAA7WqJhkrk799.jpg" />650) this.width=650;" src="/wyfs02/M00/2D/38/wKiom1OVWv2B564CAABHVzFx2Ns506.jpg" style="float:" title="QQ图片28.jpg" alt="wKiom1OVWv2B564CAABHVzFx2Ns506.jpg" />650) this.width=650;" src="/wyfs02/M02/2D/38/wKioL1OVWtDBOVeJAABRchcYfEI842.jpg" style="float:" title="QQ图片15.jpg" alt="wKioL1OVWtDBOVeJAABRchcYfEI842.jpg" />Html代码：&div&
&&&&&asp:FileUpload&ID="fuImage"&runat="server"&&/&
&&&&&asp:Button&ID="btnUpload"&runat="server"&Text="上传"&onclick="btnUpload_Click"&/&
&div&class="img_label"&
&&&&&asp:Image&ID="imgUploadImage1"&Visible="false"&runat="server"&style="height:20width:20px"&/&
&&&&&asp:Button&ID="button_ImgDelete1"&runat="server"&Text="***"&
&&&&&&&&onclick="button_ImgDelete1_Click"&Visible="false"&/&
&&&&&asp:Image&ID="imgUploadImage2"&Visible="false"&runat="server"&style="height:20width:20px"/&
&&&&&asp:Button&ID="button_ImgDelete2"&runat="server"&Text="***"&
&&&&&&&&onclick="button_ImgDelete2_Click"&Visible="false"&/&
&&&&&asp:Image&ID="imgUploadImage3"&Visible="false"&runat="server"&style="height:20width:20px"/&
&&&&&asp:Button&ID="button_ImgDelete3"&runat="server"&Text="***"&
&&&&&&&&onclick="button_ImgDelete3_Click"&Visible="false"&/&
&div&id="outerDiv"&style="position:top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:"&
&&&&&div&id="innerDiv"&style="position:"&
&&&&&&&&&img&id="bigImg"&style="border:5px&solid&#"&src=""&/&
&&&&&/div&
&/div&Js代码：$(function&()&{
&&&&* 针对上传文件按钮选择完文件判断是否选择合法文件
&&&&$("input[type=file]").change(function&()&{
&&&&&&&&var&fileName&=&$(this).val();
&&&&&&&&var&suffixRegExp&=&/\.jpg$|\.jpeg$|\.gif$|\.png$/i;
&&&&&&&&if&(suffixRegExp.test(fileName))&{
&&&&&&&&&&&&$(this).next("img").attr("src",&fileName);
&&&&&&&&else&{
&&&&&&&&&&&&$(this).val("");
&&&&&&&&&&&&alert("允许上传图片格式:GIF|JPG|GIF|.");
&&&&* 点击图片可以放大进行图片预览，再点击恢复
&&&&$("img[id*=UploadImage]").click(function&()&{
&&&&&&&&$("#bigImg").attr("src",&$(this).attr("src")).load(function&()&{
&&&&&&&&&&&&var&windowW&=&$(window).width();
&&&&&&&&&&&&var&windowH&=&$(window).height();
&&&&&&&&&&&&var&realWidth&=&this.
&&&&&&&&&&&&var&realHeight&=&this.
&&&&&&&&&&&&var&imgWidth,&imgHeight,&scale&=&0.8;
&&&&&&&&&&&&if&(realHeight&&&windowH&*&scale)&{
&&&&&&&&&&&&&&&&imgHeight&=&windowH&*&
&&&&&&&&&&&&&&&&imgWidth&=&imgHeight&/&realHeight&*&realW
&&&&&&&&&&&&&&&&if&(imgWidth&&&windowW&*&scale)&{
&&&&&&&&&&&&&&&&&&&&imgWidth&=&windowW&*&
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&&&&&else&if&(realWidth&&&windowW&*&scale)&{
&&&&&&&&&&&&&&&&imgWidth&=&windowW&*&
&&&&&&&&&&&&&&&&imgHeight&=&imgWidth&/&realWidth&*&realH
&&&&&&&&&&&&}
&&&&&&&&&&&&else&{
&&&&&&&&&&&&&&&&imgWidth&=&realW
&&&&&&&&&&&&&&&&imgHeight&=&realH
&&&&&&&&&&&&}
&&&&&&&&&&&&$(this).width(imgWidth);
&&&&&&&&&&&&$(this).height(imgHeight);
&&&&&&&&&&&&var&w&=&(windowW&-&imgWidth)&/&2;
&&&&&&&&&&&&var&h&=&(windowH&-&imgHeight)&/&2;
&&&&&&&&&&&&$("#innerDiv").css({&"top":&h,&"left":&w&});
&&&&&&&&&&&&$("#outerDiv").fadeIn("fast");
&&&&&&&&});
&&&&* 再次点击放大的图层，使图层消失
&&&&$("#outerDiv").click(function&()&{
&&&&&&&&$(this).fadeOut("fast");
&&&&* 点击上传按钮之前需要先判断是否选择了图片，如果选择的图片数量大于3，提示不能继续添加
&&&&$(btn_UploadImage).click(function&()&{
&&&&&&&&var&count&=&0;
&&&&&&&&$("div.img_label&img[src*=Upload]").each(function&()&{
&&&&&&&&&&&&if&($(this).attr("src")&!=&null)&{
&&&&&&&&&&&&&&&&count++;
&&&&&&&&&&&&}
&&&&&&&&})
&&&&&&&&if&(count&==&3)&{
&&&&&&&&&&&&alert("最多添加3张图片，如想继续添加，请先***图片");
&&&&&&&&&&&&return&
&&&&})&&&&
}C#代码：怎么说呢？最初想的是用jQuery实现Delete这块的功能，Delete图片的思路其实就是给img的src属性赋空值，然后将其隐藏掉，但是不知道为什么当再次点击【上传】按钮的时候，后台又可以获取到删掉了的图片src属性的先前的值，这是让我百思不得其解的地方。不过有时候问题总会有那么一个点，很简单但是又很难让人注意到，我本来就是在后台靠判断img的url有无值，然后再给其赋值的，那么我Delete的时候就可以直接给想Delete的img赋空值啊，何必用jQuery呢？不知道我说的大伙儿能不能懂，就是当时的一个想法，结果导致迟迟解决不了这个问题。另外想说说关于.Net自定义控件，感觉真的蛮实用的，其实我们在写的时候就把其当成普通控件就好，可以给其加一些控件属性，而这些控件属性其实就是这个自定义控件类的属性（成员参数）了，当然，我们还可以把它纯当作一个类，比如有数据库交互的时候，我们就可以在其内部写一个公开的Save方法，将控件内部的数据单独保存起来，当整个页面Save的时候，我们只要在适当的位置调用一个自定义控件的Save方法就OK了。&&&&public&partial&class&ImageUploadControl&:&System.Web.UI.UserControl
&&&&&&&&private&string&_relativeP
&&&&&&&&private&string&_value&=&"$$##";
&&&&&&&&public&string&Value
&&&&&&&&&&&&get&{&return&_&}
&&&&&&&&&&&&set&{&_value&=&&}
&&&&&&&&private&BmsContextDataContext&bcDataCXD&=&new&BmsContextDataContext();
&&&&&&&&private&bool&flag&=&//点击上传按钮时，如果给Image赋值，flag置true，说明此次上传结束，上传按钮点击一次只能给一个Image赋值
&&&&&&&&protected&void&Page_Load(object&sender,&EventArgs&e)
&&&&&&&&&&&&if&(!IsPostBack)
&&&&&&&&&&&&{&&&
&&&&&&&&&&&&&&&&Init();
&&&&&&&&&&&&}
&&&&&&&&public&void&Init()
&&&&&&&&&&&&if&(!string.IsNullOrEmpty(_value))
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&string[]&sep&=&{&"$$##"&};
&&&&&&&&&&&&&&&&string[]&imgList&=&_value.Split(sep,&StringSplitOptions.RemoveEmptyEntries);
&&&&&&&&&&&&&&&&foreach&(string&img&in&imgList)
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&if&(string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&imgUploadImage1.ImageUrl&=&
&&&&&&&&&&&&&&&&&&&&&&&&imgUploadImage1.Visible&=&
&&&&&&&&&&&&&&&&&&&&&&&&button_ImgDelete1.Visible&=&
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&else&if&(string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&imgUploadImage2.ImageUrl&=&
&&&&&&&&&&&&&&&&&&&&&&&&imgUploadImage2.Visible&=&
&&&&&&&&&&&&&&&&&&&&&&&&button_ImgDelete2.Visible&=&
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&else&if&(string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&imgUploadImage3.ImageUrl&=&
&&&&&&&&&&&&&&&&&&&&&&&&imgUploadImage3.Visible&=&
&&&&&&&&&&&&&&&&&&&&&&&&button_ImgDelete3.Visible&=&
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&public&void&Save()
&&&&&&&&&&&&_value&=&"$$##";
&&&&&&&&&&&&if&(!string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&_value&=&_value&+&imgUploadImage1.ImageUrl&+&"$$##";
&&&&&&&&&&&&}
&&&&&&&&&&&&if&(!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&_value&=&_value&+&imgUploadImage2.ImageUrl&+&"$$##";
&&&&&&&&&&&&}
&&&&&&&&&&&&if&(!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&_value&=&_value&+&imgUploadImage3.ImageUrl&+&"$$##";
&&&&&&&&&&&&}
&&&&&&&&protected&void&btnUpload_Click(object&sender,&EventArgs&e)
&&&&&&&&&&&&//点击上传按钮,将图片加载到第一个未加载图片的Image控件上
&&&&&&&&&&&&_relativePath&=&this.ImageUpload(fuImage);
&&&&&&&&&&&&_value&=&"$$##";//每次点击上传按钮，都是对当前控件的状态进行遍历，重新进行组串
&&&&&&&&&&&&if&(string.IsNullOrEmpty(imgUploadImage1.ImageUrl)&&&&!flag&)
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&//当Image中无url，同时flag为false
&&&&&&&&&&&&&&&&imgUploadImage1.ImageUrl&=&_relativeP
&&&&&&&&&&&&&&&&_value&=&_value&+&_relativePath&+&"$$##";
&&&&&&&&&&&&&&&&imgUploadImage1.Visible&=&
&&&&&&&&&&&&&&&&button_ImgDelete1.Visible&=&
&&&&&&&&&&&&&&&&flag&=&
&&&&&&&&&&&&}
&&&&&&&&&&&&else
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&if&(!string.IsNullOrEmpty(imgUploadImage1.ImageUrl))
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&_value&=&_value&+&imgUploadImage1.ImageUrl&+&"$$##";
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&&&&&if&(string.IsNullOrEmpty(imgUploadImage2.ImageUrl)&&&&!flag)
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&imgUploadImage2.ImageUrl&=&_relativeP
&&&&&&&&&&&&&&&&_value&=&_value&+&_relativePath&+&"$$##";
&&&&&&&&&&&&&&&&imgUploadImage2.Visible&=&
&&&&&&&&&&&&&&&&button_ImgDelete2.Visible&=&
&&&&&&&&&&&&&&&&flag&=&
&&&&&&&&&&&&}
&&&&&&&&&&&&else
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&//加if是原因，如果是因为flag为true而进入这个分支，则判断Image的url是否为空
&&&&&&&&&&&&&&&&if&(!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&_value&=&_value&+&imgUploadImage2.ImageUrl&+&"$$##";
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&&&&&if&(string.IsNullOrEmpty(imgUploadImage3.ImageUrl)&&&&!flag)
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&imgUploadImage3.ImageUrl&=&_relativeP
&&&&&&&&&&&&&&&&_value&=&_value&+&_relativePath&+&"$$##";
&&&&&&&&&&&&&&&&imgUploadImage3.Visible&=&
&&&&&&&&&&&&&&&&button_ImgDelete3.Visible&=&
&&&&&&&&&&&&&&&&flag&=&
&&&&&&&&&&&&}
&&&&&&&&&&&&else
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&if&(!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&_value&=&_value&+&imgUploadImage3.ImageUrl&+&"$$##";
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&}
&&&&&&&&private&string&ImageUpload(FileUpload&fileUpload)
&&&&&&&&&&&&//如果FileUpload控件中有文件
&&&&&&&&&&&&if&(fileUpload.HasFile)
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&string&timeStamp&=&DateTime.Now.Ticks.ToString();//时间戳
&&&&&&&&&&&&&&&&string&savePath&=&Server.MapPath("~/Upload/Images");//上传路径
&&&&&&&&&&&&&&&&//如果不存在此路径,则创建一个新路径
&&&&&&&&&&&&&&&&if&(!Directory.Exists(savePath))
&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&Directory.CreateDirectory(savePath);
&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&savePath&=&savePath&+&"\\"&+&timeStamp&+&"_"&+&fileUpload.FileN//重组文件名,加上对应的时间戳
&&&&&&&&&&&&&&&&fileUpload.SaveAs(savePath);//将图片上传到服务器
&&&&&&&&&&&&&&&&return&"/Upload/Images/"&+&timeStamp&+&"_"&+&fileUpload.FileN&//返回图片的名称,相对路径的
&&&&&&&&&&&&}
&&&&&&&&&&&&else
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&Utility.Show(this.Page,&"未选择图片");
&&&&&&&&&&&&}
&&&&&&&&&&&&return&
&&&&&&&&protected&void&button_ImgDelete1_Click(object&sender,&EventArgs&e)
&&&&&&&&&&&&if&(!string.IsNullOrEmpty(imgUploadImage2.ImageUrl))
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&imgUploadImage1.ImageUrl&=&imgUploadImage2.ImageU
&&&&&&&&&&&&}
&&&&&&&&&&&&else
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&imgUploadImage1.ImageUrl&=&"";
&&&&&&&&&&&&&&&&imgUploadImage1.Visible&=&
&&&&&&&&&&&&&&&&button_ImgDelete1.Visible&=&
&&&&&&&&&&&&}
&&&&&&&&&&&&if&(!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&imgUploadImage2.ImageUrl&=&imgUploadImage3.ImageU
&&&&&&&&&&&&&&&&imgUploadImage3.ImageUrl&=&"";
&&&&&&&&&&&&&&&&imgUploadImage3.Visible&=&
&&&&&&&&&&&&&&&&button_ImgDelete3.Visible&=&
&&&&&&&&&&&&}
&&&&&&&&&&&&else
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&imgUploadImage2.ImageUrl&=&"";
&&&&&&&&&&&&&&&&imgUploadImage2.Visible&=&
&&&&&&&&&&&&&&&&button_ImgDelete2.Visible&=&
&&&&&&&&&&&&}
&&&&&&&&protected&void&button_ImgDelete2_Click(object&sender,&EventArgs&e)
&&&&&&&&&&&&if&(!string.IsNullOrEmpty(imgUploadImage3.ImageUrl))
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&imgUploadImage2.ImageUrl&=&imgUploadImage3.ImageU
&&&&&&&&&&&&&&&&imgUploadImage3.ImageUrl&=&"";
&&&&&&&&&&&&&&&&imgUploadImage3.Visible&=&
&&&&&&&&&&&&&&&&button_ImgDelete3.Visible&=&
&&&&&&&&&&&&}
&&&&&&&&&&&&else
&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&imgUploadImage2.ImageUrl&=&"";
&&&&&&&&&&&&&&&&imgUploadImage2.Visible&=&
&&&&&&&&&&&&&&&&button_ImgDelete2.Visible&=&
&&&&&&&&&&&&}
&&&&&&&&protected&void&button_ImgDelete3_Click(object&sender,&EventArgs&e)
&&&&&&&&&&&&imgUploadImage3.ImageUrl&=&"";
&&&&&&&&&&&&imgUploadImage3.Visible&=&
&&&&&&&&&&&&button_ImgDelete3.Visible&=&
&&&&}总结一下这次的控件开发，其实在写这种自定义控件的时候，实现某些功能，我们要尽量去琢磨用后台来直接实现，而不是上来就用js，最后弄的代码的功能实现极为分散，也容易将自己搞糊涂。总之就是一句话，上手之前一定要先计划好。最后希望大家给予更多更好的建议，我会继续做扩展。也希望能有朋友给加上好看的样式，我们一起玩玩~新浪微博： 欢迎围观~！本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)
11:47:26 13:38:56 13:51:18 14:21:18 14:31:24 14:58:44JavaScript模仿Pinterest实现图片预加载功能
投稿：daisy
字体：[ ] 类型：转载 时间：
图片预加载是web开发中一种应用相当广泛的技术，比如我们在做图片翻转显示等特效的时候，为了让图片在转换的时候不出现等待，我们最好是先让图片下载到本地，然后在继续执行后续的操作。今天本文主要介绍的是利用JS模仿Pinterest图片社交网站的图片预加载功能。
对于Pinterest网站，从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节。
看看下面的截图:
大家可以感觉到图片出来的时候预先绘制轮廓，重点是预制区域的颜色采用与图片较为相似的色彩值，当图片加载完全后，会有种渐入的效果。
其中谷歌的图片搜索也用到了类似效果:
我们称之为这种效果为Color Placeholder [色彩预置]，当图片加载的时候，我们优先显示其所在容器的背景颜色（如同很多会显示一个加载的gif），由于受限于不同的图片和大小，因此相比与齐刷刷的加载gif，不同色块体验 可能 更好吧(至少Pinterest Google这么认为吧).
接下来我们进入正题，如何自己实现这样的动画加载效果(实现的方式肯定有很多的也欢迎大家提出更好的思路)
我们先定义下基本的html结构
&!--一个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/55.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" /&
&p class="title"&Mars&/p&
再看下css设置
.image-bg{
background: #e1e1e1;
width:100%;
opacity: 0;
transition: opacity .2s ease-in .25s;
.loaded img {
opacity: 1;
图片默认是透明度为0，当加载完成后设置为1就行啦。
$(function() {
$('.post img').each(function() {
var image = new Image();
image.src = el.
image.onload = function() {
$(el).parent().addClass('loaded');
大概基本思路就是这些，但是这里面最核心的就是确定所谓的Dominant Color(图片中主要色彩)。
完整示例如下：
&!doctype html&
&html lang="en"&
&title&实现类似Pinterest 的图片预加载功能&/title&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&
&link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css" /&
&style type="text/css"&
font-family: sans-
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 62.5%;
-webkit-tap-highlight-color: transparent
font-family: 'Helvetica Neue','\5FAE\8F6F\96C5\9ED1','\9ED1\4F53',sans-
letter-spacing: .01
font-size: 15
line-height: 1.75
color: #3A4145;
-webkit-font-feature-settings: 'kern' 1;
-moz-font-feature-settings: 'kern' 1;
-o-font-feature-settings: 'kern' 1;
padding-top: 40
text-align:
width: 720
margin: 80
text-align:
margin: 10
font-size: 18
color:#666;
line-height: 30
.image-bg{
background: #e1e1e1;
width:100%;
opacity: 0;
transition: opacity .2s ease-in .25s;
.loaded img {
opacity: 1;
&script src="//s1./jquery-1.10.2.min.js"&&/script&
&body class="doc"&
&h1&实现类似Pinterest 的图片预加载功能&/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="https://mir-s3-cdn-cf.behance.net/projects/404/55.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" /&
&p class="title"&Mars&/p&
&div class="col-md-6"&
&div class="post"&
&div class="image-bg" style="background-color:#3e90" &
&img width="310" height="242" src="https://mir-s3-cdn-cf.behance.net/projects/404/1f430bJvcCw4MjEsNjQyLDEwMSwzMA.jpg" /&
&p class="title"&Grass&/p&
&div class="col-md-6"&
&div class="post"&
&div class="image-bg" style="background-color:#09171e;" &
&img width="310" height="242" src="https://mir-s3-cdn-cf.behance.net/projects/404/4bfb.Y3JvcCw5NTgsNzQ5LDIyMCwyNg.jpg" /&
&p class="title"&journet to the west2&/p&
&div class="col-md-6"&
&div class="post"&
&div class="image-bg" style="background-color:#d4cab1;" &
&img width="310" height="242" src="https://mir-s3-cdn-cf.behance.net/projects/404/96ed6cJvcCw1NDksNDI5LDEyNiwxODU.png" /&
&p class="title"&Marriage&/p&
&div class="col-md-6"&
&div class="post"&
&div class="image-bg" style="background-color:#fff8" &
&img width="310" height="242" src="https://mir-s3-cdn-cf.behance.net/projects/404/ce4a.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" /&
&p class="title"&Birthday Card&/p&
&div class="col-md-6"&
&div class="post"&
&div class="image-bg" style="background-color:#" &
&img width="310" height="242" src="https://mir-s3-cdn-cf.behance.net/projects/404/fa5decJvcCwxMDk1LDg1Niw0ODUsMTY.png" /&
&p class="title"&Cup&/p&
&script type="text/javascript"&
$(function() {
$('.post img').each(function() {
var image = new Image();
image.src = el.
image.onload = function() {
$(el).parent().addClass('loaded');
设置背景的颜色
如果你用photoshop打开一张图片的话，你只需要几步就可以确定你希望得到的颜色: 滤镜 -& 模糊 -& 平均即可。
当然这是针对你所能处理的图片，如果面对海量的图片的话，这个时候我们需要用程序去实现。
寻找到一张图片较为明显的颜色，需要在三维空间中找到一些聚合的点。如果自己写的话，需要去了解一些聚合算法。当然自己并不打算去写更多的内容关于如何去进行图片的这些颜色的生成，这恐怕不是一篇文章能给说完的。实际上你安装ImageMagick就可以简单的实现预期效果:
convert path/or/url/to/image.png -resize 1x1 txt:-
但是这个不太适合我们写程序的。我们可以使用第三方的npm gm
var gm = require('gm');
gm('demo1.png')
.resize(120, 120)
.colors(1)
.toBuffer('RGB', function (error, buffer) {
console.log(buffer.slice(0, 3));
运行输出效果如下：
~ node gm.js
./demo1.png:
&Buffer 34 29 3b&
./demo2.png:
&Buffer cf c3 ad&
对比图如下：
因此借助程序，我们可以在保存图片的时候进行颜色采集，代码中通过先将图片进行大小调整，实际是出于性能的考虑。有助于节约运算时间。除此之外embed.ly也开放了对应的API，方便你获取网络图片的主要色彩。
如果我们能够有途径获取这样的颜色的话，自然整体功能就没有什么难度了。
其实除了纯粹的颜色背景外，我们还可能会遇到类似 medium 的图片(参考上图)预加载技术，才开始图片是模糊的。实际上我们可以通过插件生成一张几素的小图片，然后运用上高四模糊滤镜，然后等待原图加载完毕后，我们在显示原来的图片。
var gm = require('gm');
gm('demo1.png')
.resize(4, 4)
.toBuffer('GIF', function (error, buffer) {
console.log('data:image/base64,' + buffer.toString('base64'));
&div class="image-bg" style="background-color:#141646"&
&img src="data:image/base64,R0lGODlhBAADAPMJACwlPjAmPDUqOzgrOgQPSgkSShAVRhEWRplcFsR3EAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAEAAMAAAQJ0" width="310" height="242" real-src="https://mir-s3-cdn-cf.behance.net/projects/404/55.Y3JvcCwxMDk1LDg1NiwyNTIsMjE.png" /&
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}