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

来源：互联网发布：c语言头文件 stdio.h 编辑：程序博客网时间：2024/06/07 06:44

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

上代码：

 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>