jquery exif + lazyload实现延迟加载并显示相片exif信息

2019独角兽企业重金招聘Python工程师标准>>>

对一个摄影爱好者来说，从高手的作品中学习是非常有用的。而照片的光圈，快门，感光度等信息是关注的重点。

上代码：

 1 <script src="../js/jquery.js" type="text/javascript"></script>
 2 <script src="../js/jquery.exif.js" type="text/javascript"></script>
 3 <script src="../js/jquery.lazyload.js" type="text/javascript"></script>
 4 <script type="text/javascript">
 5     $(document).ready(
 6         function()
 7         {
 8             count = 19 ;
 9             var defaultVision = "建筑"
10             for( i=1;i<count;++i )
11             {
12                 var pin = $('<div></div>',{'class':'pin'}) ;
13                 var img_src = 'photos/'+defaultVision+'/'+i+'.jpg' ;
14
15
16                 var img = $('<img />',{'src':'../images/loading.gif','data-original': img_src,'class':'lazy img'});
17                 pin.append(img);
18                 var img_info ="<div class='img_info'><img src='../images/loading.gif' /></div>" ;
19                 pin.append(img_info);
20                 $('#columns').append(pin);
21             }
22
23             mylazy();
24         }
25     );
26
27     var mylazy = function()
28     {
29         $("img.lazy").lazyload({
30                 effect : "fadeIn",
31                 load : function()
32                 {
33                     setPhoto_info(this);
34                 },
35         });
36     }
37     function setPhoto_info(ele)
38     {
39         //获取图片的Exif信息
40         var info = "" ;
41         var model = "" ;
42         var fnumber = "" ;
43         var time = "" ;
44         var iso = "" ;
45         var $this = $(ele).exifLoad(function()
46         {
47             //这里还可以获取更多的参数，参见exif的信息格式
48             model = $this.exif("Model");
49             fnumber = $this.exif("FNumber");
50             time = $this.exif("ExposureTime");
51             iso = $this.exif("ISOSpeedRatings");
52
53             if( time<1 ) time = "1/" + Math. round(1/time) ;
54             else time += "s" ;
55
56             var img_info = "<span>型号:<em class='model'>"+model+"</em></span>"+
57             "<span>光圈:<em class='fNumber'>"+fnumber+"</em></span>"+
58             "<br /><span>快门:<em class='ex_time'>"+time+"</em></span>"+
59             "<span>ISO:<em class='iso'>"+iso+"</em></span>";
60             $(ele).parent().find(".img_info").html(img_info);
61         });
62     }
63 </script>

之前遇到的问题是：
1，在jquery exif官网上的使用方式与这里不同；参考了网上的一些做法：http://developer.51cto.com/art/201207/346157.htm
2，需要在lazyload的load函数中定义回调函数，以使图片在加载完成后再读取exif信息

下面是用css3 columns实现的一个简单的Pinterest的例子,完整的代码如下：

  1 <!DOCTYPE HTML>
  2 <html lang="en">
  3 <head>
  4 <meta charset="utf-8" />
  5 <title>Pinterest</title>
  6 </head>
  7 <style type="text/css">
  8 * {  9     margin:0;
 10     padding:0;
 11 }
 12 body { 13     background:url(../images/beige_paper.png);
 14     font-family:"Microsoft Yahei";
 15     font-size:0.8em;
 16     color:#999;
 17 }
 18
 19 #container { 20     width:100%;
 21     height:100%;
 22 }
 23 /*这里准备加上不同的相册*/
 24 footer
 25 { 26
 27 }
 28 #columns
 29 { 30     -webkit-column-count: 3;
 31     -webkit-column-gap: 10px;
 32     -webkit-column-fill: auto;
 33 }
 34 .pin
 35 { 36     display: inline-block;
 37     background: #FEFEFE;
 38     border: 2px solid #FAFAFA;
 39     box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
 40     margin: 0 2px 15px;
 41     -webkit-column-break-inside: avoid;
 42     -moz-column-break-inside: avoid;
 43     column-break-inside: avoid;
 44     padding: 5px;
 45     background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
 46     opacity: 1;
 47     position:relative;
 48     -webkit-transition: all .2s ease;
 49 }
 50 .pin img.img { 51     width: 100%;
 52 }
 53 .pin .img_info
 54 { 55     padding:5px 0;
 56 }
 57 .pin .img_info em
 58 { 59     color:#000;
 60 }
 61 .pin .img_info span
 62 { 63     margin:0 3px;
 64 }
 65 @media (min-width: 960px) { 66     #columns {
 67         -webkit-column-count: 4;
 68         -moz-column-count: 4;
 69         column-count: 4;
 70     }
 71 }
 72
 73 @media (min-width: 1100px) { 74     #columns {
 75         -webkit-column-count: 5;
 76         -moz-column-count: 5;
 77         column-count: 5;
 78     }
 79 }
 80 #columns:hover .pin:not(:hover) { 81     opacity: 0.4;
 82 }
 83
 84 </style>
 85 <script src="../js/jquery.js" type="text/javascript"></script>
 86 <script src="../js/jquery.exif.js" type="text/javascript"></script>
 87 <script src="../js/jquery.lazyload.js" type="text/javascript"></script>
 88 <script type="text/javascript">
 89     $(document).ready(
 90         function()
 91         {
 92             count = 19 ;
 93             var defaultVision = "建筑"
 94             for( i=1;i<count;++i )
 95             {
 96                 var pin = $('<div></div>',{'class':'pin'}) ;
 97                 var img_src = 'photos/'+defaultVision+'/'+i+'.jpg' ;
 98
 99
100                 var img = $('<img />',{'src':'../images/loading.gif','data-original': img_src,'class':'lazy img'});
101                 pin.append(img);
102                 var img_info ="<div class='img_info'><img src='../images/loading.gif' /></div>" ;
103                 pin.append(img_info);
104                 $('#columns').append(pin);
105             }
106
107             mylazy();
108         }
109     );
110
111     var mylazy = function()
112     {
113         $("img.lazy").lazyload({
114                 effect : "fadeIn",
115                 load : function()
116                 {
117                     setPhoto_info(this);
118                 },
119         });
120     }
121     function setPhoto_info(ele)
122     {
123         //获取图片的Exif信息
124         var info = "" ;
125         var model = "" ;
126         var fnumber = "" ;
127         var time = "" ;
128         var iso = "" ;
129         var $this = $(ele).exifLoad(function()
130         {
131             //这里还可以获取更多的参数，参见exif的信息格式
132             model = $this.exif("Model");
133             fnumber = $this.exif("FNumber");
134             time = $this.exif("ExposureTime");
135             iso = $this.exif("ISOSpeedRatings");
136
137             if( time<1 ) time = "1/" + Math. round(1/time) ;
138             else time += "s" ;
139
140             var img_info = "<span>型号:<em class='model'>"+model+"</em></span>"+
141             "<span>光圈:<em class='fNumber'>"+fnumber+"</em></span>"+
142             "<br /><span>快门:<em class='ex_time'>"+time+"</em></span>"+
143             "<span>ISO:<em class='iso'>"+iso+"</em></span>";
144             $(ele).parent().find(".img_info").html(img_info);
145         });
146     }
147 </script>
148 <body>
149 <div id="container">
150   <div id="columns">
151
152   </div>
153 </div>
154 <footer></footer>
155 </body>
156 </html>

转载于:https://my.oschina.net/ifeixiang/blog/339566

jquery exif + lazyload实现延迟加载并显示相片exif信息相关推荐

【jQuery】利用lazyload.js延迟加载技术应对多图杀猫的单一页面
有时候不可避免地在某一页面摆上大量图片,众所周知,一张网页如果上面的元素超过100KB,那么,你的网页会加载得很慢,纵使现在的网络已经不是当年的猫,然而,你也应该尽可能地提高你的网页加载速度.对于多图 ...
jquery插件实现图片延迟加载
在页面中图片较多时,一次性加载所有图片会耗去很多时间. 我们可以选择"延迟加载"的方式来加载图片,相对这种页面的加载速度将会有个很大的提升. 图片延迟加载的原理很简单,依据用户正浏 ...
使用jquery插件实现图片延迟加载技术
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
MATLAB批量读取航摄相片EXIF信息和GNSS信息以及MATLAB批量经纬度坐标转换空间直角坐标
前言没有前言,创作不易,希望家人们点点赞,如有错误评论留言,感谢支持! 文章目录前言一.MATLAB批量读取航摄相片的EXIF信息,并批量提取其GNSS经纬度信息 (1)前述: (2)代码实现和 ...
jquery控制元素的隐藏和显示的几种方法。
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#id").hide ...
html鼠标经过盒子延时显示,jQuery实现鼠标滑过延时显示的效果
WEB开发人员有时候经常用到延时操作的用户交互事件,比如聚美优品网站首页的产品展示,当鼠标移入产品1秒钟后,会显示产品的详情,而不希望用户的鼠标指针刚刚移入元素就显示详情,对于不希望显示详情的用户来说 ...
使用libexif开源库修改jpeg相片exif信息
使用libexif开源库修改jpeg相片exif信息 libexif简介一.读exif信息二.写exif信息说明例:修改exif中GPS海拔高度 libexif简介 libexif是一个开源的 ...
jquery实现div的隐藏和显示
jquery实现div的隐藏和显示 $('#wsView')是要点击的按钮,$('#secondMenu')是要显示或隐藏的内容区域 <div style="float:left;ma ...
html点击隐藏divjq,jquery点击a标签怎么显示和隐藏div?详解
你知道jquery点击a标签要如何才能够显示以及隐藏div吗?下面的文章要给大家讲解的就是这个方面的内容哦,一起来看看吧. 1.新建一个html文件,命名test.html,用来讲解jquery点击a ...

jquery exif + lazyload实现延迟加载并显示相片exif信息

jquery exif + lazyload实现延迟加载并显示相片exif信息相关推荐

最新文章

热门文章