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

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

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

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

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

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

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

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

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

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

<ul id="Gallery" style="display:none;">
<!-- 下面10個(gè)是一開始通過接口獲取到的圖片 -->
<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>
<!-- 可以依要求加多個(gè)上面的占位a標(biāo)簽-->
</ul>

通過偵聽PhotoSwipe.EventTypes.onDisplayImage事件，修改e.target.cache.images，以實(shí)現(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ù)加載這個(gè)圖片
      needSetImg["src"] = url;//把圖片地址賦值給PhotoSwipe的圖片集合中相應(yīng)對(duì)象屬性
      $(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序如何通過用戶授權(quán)獲取手機(jī)號(hào)(getPhoneNumber)

    微信小程序如何通過用戶授權(quán)獲取手機(jī)號(hào)(getPhoneNumber)

    這篇文章主要介紹了微信小程序如何通過用戶授權(quán)獲取手機(jī)號(hào)(getPhoneNumber),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-01-01
  • Web Uploader文件上傳插件使用詳解

    Web Uploader文件上傳插件使用詳解

    WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。這篇文章主要為大家詳細(xì)介紹了Web Uploader文件上傳插件使用方法，感興趣的小伙伴們可以參考一下
    2016-05-05
  • DOM 事件的深入淺出（一）

    DOM 事件的深入淺出（一）

    本文主要介紹了不同DOM級(jí)別下的事件處理程序，同時(shí)介紹了事件冒泡和捕獲的觸發(fā)原理和方法。熟練地使用不同級(jí)別的DOM事件并且解決相應(yīng)的瀏覽器兼容性問題對(duì)我們的前端項(xiàng)目開發(fā)會(huì)很有幫助。
    2016-12-12
  • 微信小程序?qū)崿F(xiàn)左側(cè)導(dǎo)航欄

    微信小程序?qū)崿F(xiàn)左側(cè)導(dǎo)航欄

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左側(cè)導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • 判斷字符串的長度(優(yōu)化版)中文占兩個(gè)字符

    判斷字符串的長度(優(yōu)化版)中文占兩個(gè)字符

    判斷字符串的長度的方法有很多，本例介紹的是優(yōu)化之前的方法，記住中文占兩個(gè)字符，需要的朋友不要錯(cuò)過
    2014-10-10
  • javascript快速排序算法詳解

    javascript快速排序算法詳解

    JavaScript實(shí)現(xiàn)的常見排序算法有:冒泡排序,選擇排序,插入排序,謝爾排序,快速排序(遞歸),快速排序(堆棧),歸并排序,堆排序。今天我們來詳細(xì)分析下快速排序算法
    2014-09-09
  • Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單(7)

    Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單(7)

    這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • JavaScript轉(zhuǎn)換與解析JSON方法實(shí)例詳解

    JavaScript轉(zhuǎn)換與解析JSON方法實(shí)例詳解

    這篇文章主要介紹了JavaScript轉(zhuǎn)換與解析JSON方法,實(shí)例分析了JavaScript解析json的技巧,并附帶分析了jQuery解析與轉(zhuǎn)換json的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-11-11
  • JavaScript中import用法總結(jié)

    JavaScript中import用法總結(jié)

    在本篇文章里小編給大家分享了關(guān)于JavaScript中import用法知識(shí)點(diǎn)，有需要的朋友們可以學(xué)習(xí)下。
    2019-01-01
  • javascript 簡單高效判斷數(shù)據(jù)類型 系列函數(shù) By shawl.qiu

    javascript 簡單高效判斷數(shù)據(jù)類型 系列函數(shù) By shawl.qiu

    javascript 簡單高效判斷數(shù)據(jù)類型 系列函數(shù) By shawl.qiu...
    2007-03-03

最新評(píng)論