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>
