PhotoSwipe异步动态加载图片

在开发搜房家居M站的时候，搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片。特点：1. 家居提供的接口，每次只能获取一张图片2. 装修效果图的张数不限。3. 从PhotoSwipe用法来看，在PhotoSwipe初始化前必须把所有图片列出。

instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

标签a是PhotoSwipe初始化前的， 之后再往Gallery里动态添加是无效的。

目前的方案是先调用10次接口，列出10张图片，当展示完这10张图片后，通过网址跳转到下一页，展示下一组的10个图片。

这种方案的优点是1. 容易实现。缺点也很是明显：1. 每次跳转到下一页都会让用户等待比较长的时间。（10次调用接口的时间+当前图片下载到客户端的时间+其他时间）2. 在图片左右滑动的过程中，突然再来年页面跳转也影响了用户体验。如何优化PhotoSwipe实现不分页不跳转。用过PhotoSwipe的人都应该了解PhotoSwipe.EventTypes.onDisplayImage。每次显示一个图片都会触发这个事件，

1 instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){2     //在这里实现一些代码功能。3 });

通过研究发现通过e.target.cache.images可以访问所以展示的图片对象集合。这样思路就比较清晰了—“先定义足够的a占位，然后在图片滑动显示的过程中不断地通过Ajax逐个获取图片的地址，然后赋值e.target.cache.images图片集合中的相应图片。”

下面代码是这个思路方法的实现（为了方便说明这个思路，略去了其中额外细节）

 1 <ul id="Gallery" style="display:none;"> 2 <!-- 下面10个是一开始通过接口获取到的图片 --> 3 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/30/82/86/pic/000711232400/800x800.jpg"></a></li> 4 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_04/18/31/94/pic/000664552500/800x800.jpg"></a></li> 5 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg"></a></li> 6 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/05/75/33/pic/005426525600/800x800.png"></a></li> 7 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_02/12/13/15/pic/007331476000/800x800.jpg"></a></li> 8 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_05/06/44/99/pic/004717983300/800x800.jpg"></a></li> 9 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2013_12/26/68/74/pic/003539926900/800x800.jpg"></a></li>10 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/26/64/20/pic/005089500900/800x800.jpg"></a></li>11 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_05/06/23/73/pic/004716773600/800x800.jpg"></a></li>12 <li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_05/09/43/37/pic/002581572500/800x800.jpg"></a></li>13 <!-- 以下是占位a标签-->14 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>15 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>16 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>17 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>18 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>19 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>20 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>21 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>22 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>23 <li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>24 <!-- 可以依要求加多个上面的占位a标签-->25 </ul>

通过侦听PhotoSwipe.EventTypes.onDisplayImage事件，修改e.target.cache.images，以实现在图片未下载前更正占位图片的地址。

 1 var aimgArrIndex=0; 2 var picSetIndex = 10; 3 instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){ 4     var needSetImg = e.target.cache.images[picSetIndex++]; 5     if(needSetImg){ 6         $.getJSON(“./index.php?c=jiaju&a=ajaxNextPicInfo&picid={picid参数}”, function(data){ 7             var url = data[0][“img”] 8             new Image().src = url;//预加载这个图片 9             needSetImg["src"] = url;//把图片地址赋值给PhotoSwipe的图片集合中相应对象属性10             $(needSetImg.metaData.item).data('comment','');//其他附加内容通过这样设置11         })12     }13 });14  

index.php?c=jiaju&a=ajaxNextPicInfo&picid={picid参数} 返回内容。根据picid的不同每调用一次返回一条图片的相关信息。

[{"img":"http://img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg"}]