DIV CSS 佈局教程網

在開發搜房家居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的不同每調用一次返回一條圖片的相關信息。 
復制代碼 代碼如下:[{"img":http://img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]

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