在開發搜房家居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="viewimage/zxb/2014_06/30/82/86/pic/000711232400/800x800.jpg"></a></li><li><a href="viewimage/zxb/2014_04/18/31/94/pic/000664552500/800x800.jpg"></a></li><li><a href="viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg"></a></li><li><a href="viewimage/zxb/2014_06/05/75/33/pic/005426525600/800x800.png"></a></li><li><a href="viewimage/zxb/2014_02/12/13/15/pic/007331476000/800x800.jpg"></a></li><li><a href="viewimage/zxb/2014_05/06/44/99/pic/004717983300/800x800.jpg"></a></li><!-- 以下是占位a標簽--><li><a href="common_m/m_public/images/loading.gif"></a></li><li><a href="common_m/m_public/images/loading.gif"></a></li><li><a href="common_m/m_public/images/loading.gif"></a></li><li><a href="common_m/m_public/images/loading.gif"></a></li><li><a href="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的不同每調用一次返回一條圖片的相關信息。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
