在開發搜房家居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圖片集合中的相應圖片。”

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

通過偵聽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}]

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的html photoswipe原理,PhotoSwipe异步动态加载图片方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。