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

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

上代码:

 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>

 

你可能感兴趣的:(jquery exif + lazyload实现延迟加载并显示相片exif信息)