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。每次顯示一個圖片都會觸發這個事件，

instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
    //在這里實現一些代碼功能。
});

通過研究發現通過e.target.cache.images可以訪問所以展示的圖片對象集合。這樣思路就比較清晰了—“先定義足夠的a占位，然后在圖片滑動顯示的過程中不斷地通過AJAX逐個獲取圖片的地址，然后賦值e.target.cache.images圖片集合中的相應圖片。”

下面代碼是這個思路方法的實現（為了方便說明這個思路，略去了其中額外細節）

<ul id="Gallery" style="display:none;">
<!-- 下面10個是一開始通過接口獲取到的圖片 -->
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/30/82/86/pic/000711232400/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_04/18/31/94/pic/000664552500/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/05/75/33/pic/005426525600/800x800.png"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_02/12/13/15/pic/007331476000/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_05/06/44/99/pic/004717983300/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2013_12/26/68/74/pic/003539926900/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/26/64/20/pic/005089500900/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_05/06/23/73/pic/004716773600/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_05/09/43/37/pic/002581572500/800x800.jpg"></a></li>
<!-- 以下是占位a標簽-->
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<!-- 可以依要求加多個上面的占位a標簽-->
</ul>

通過偵聽PhotoSwipe.EventTypes.onDisplayImage事件，修改e.target.cache.images，以實現在圖片未下載前更正占位圖片的地址。

var aimgArrIndex=0;
var picSetIndex = 10;
instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
    var needSetImg = e.target.cache.images[picSetIndex++];
    if(needSetImg){
        $.getJSON(“./index.php?c=jiaju&a=ajaxNextPicInfo&picid={picid參數}”, function(data){
            var url = data[0][“img”]
            new Image().src = url;//預加載這個圖片
            needSetImg["src"] = url;//把圖片地址賦值給PhotoSwipe的圖片集合中相應對象屬性
            $(needSetImg.metaData.item).data('comment','');//其他附加內容通過這樣設置
        })
    }
});
 

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"}]