欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

PhotoSwipe異步動態(tài)加載圖片方法

 更新時間：2016年08月25日 15:40:22   作者：岳彥磊  
這篇文章主要為大家詳細介紹了PhotoSwipe異步動態(tài)加載圖片方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在開發(fā)搜房家居M站的時候，搜房家居裝修效果圖相冊展示效果需要用到PhotoSwipe插件來顯示圖片。
特點：
1. 家居提供的接口，每次只能獲取一張圖片
2. 裝修效果圖的張數(shù)不限。
3. 從PhotoSwipe用法來看，在PhotoSwipe初始化前必須把所有圖片列出。
 instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options ); 

標(biāo)簽a是PhotoSwipe初始化前的， 之后再往Gallery里動態(tài)添加是無效的。 

目前的方案是先調(diào)用10次接口，列出10張圖片，當(dāng)展示完這10張圖片后，通過網(wǎng)址跳轉(zhuǎn)到下一頁，展示下一組的10個圖片。 

這種方案的優(yōu)點是
1. 容易實現(xiàn)。
缺點也很是明顯：
1. 每次跳轉(zhuǎn)到下一頁都會讓用戶等待比較長的時間。（10次調(diào)用接口的時間+當(dāng)前圖片下載到客戶端的時間+其他時間）
2. 在圖片左右滑動的過程中，突然再來年頁面跳轉(zhuǎn)也影響了用戶體驗。
如何優(yōu)化PhotoSwipe實現(xiàn)不分頁不跳轉(zhuǎn)。
用過PhotoSwipe的人都應(yīng)該了解PhotoSwipe.EventTypes.onDisplayImage。每次顯示一個圖片都會觸發(fā)這個事件，

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

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

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

<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標(biāo)簽-->
<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標(biāo)簽-->
</ul>

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

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參數(shù)}”, function(data){
      var url = data[0][“img”]
      new Image().src = url;//預(yù)加載這個圖片
      needSetImg["src"] = url;//把圖片地址賦值給PhotoSwipe的圖片集合中相應(yīng)對象屬性
      $(needSetImg.metaData.item).data('comment','');//其他附加內(nèi)容通過這樣設(shè)置
    })
  }
});

index.php?c=jiaju&a=ajaxNextPicInfo&picid={picid參數(shù)} 返回內(nèi)容。根據(jù)picid的不同每調(diào)用一次返回一條圖片的相關(guān)信息。 

復(fù)制代碼 代碼如下:
[{"img":http://img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論