PhotoSwipe異步動態(tài)加載圖片方法
在開發(fā)搜房家居M站的時候，搜房家居裝修效果圖相冊展示效果需要用到PhotoSwipe插件來顯示圖片。
特點(diǎn)：
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)點(diǎn)是
1. 容易實(shí)現(xiàn)。
缺點(diǎn)也很是明顯：
1. 每次跳轉(zhuǎn)到下一頁都會讓用戶等待比較長的時間。（10次調(diào)用接口的時間+當(dāng)前圖片下載到客戶端的時間+其他時間）
2. 在圖片左右滑動的過程中，突然再來年頁面跳轉(zhuǎn)也影響了用戶體驗(yàn)。
如何優(yōu)化PhotoSwipe實(shí)現(xiàn)不分頁不跳轉(zhuǎn)。
用過PhotoSwipe的人都應(yīng)該了解PhotoSwipe.EventTypes.onDisplayImage。每次顯示一個圖片都會觸發(fā)這個事件，
instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
//在這里實(shí)現(xiàn)一些代碼功能。
});
通過研究發(fā)現(xiàn)通過e.target.cache.images可以訪問所以展示的圖片對象集合。這樣思路就比較清晰了—“先定義足夠的a占位，然后在圖片滑動顯示的過程中不斷地通過AJAX逐個獲取圖片的地址，然后賦值e.target.cache.images圖片集合中的相應(yīng)圖片。”
下面代碼是這個思路方法的實(shí)現(xiàn)（為了方便說明這個思路，略去了其中額外細(xì)節(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，以實(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ù)加載這個圖片
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)信息。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 相冊展示PhotoSwipe.js插件實(shí)現(xiàn)
- 移動端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
- 手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn)
- 手機(jī)端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果
- 手機(jī)圖片預(yù)覽插件photoswipe.js使用總結(jié)
- 手機(jī)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
- js異步加載的三種解決方案
- Javascript 異步加載詳解(瀏覽器在javascript的加載方式)
- javascript 文件的同步加載與異步加載實(shí)現(xiàn)原理
- js 實(shí)現(xiàn)圖片預(yù)加載(js操作 Image對象屬性complete ，事件onload 異步加載圖片)
相關(guān)文章
JavaScript黑洞數(shù)字之運(yùn)算路線查找算法(遞歸算法)實(shí)例
這篇文章主要介紹了JavaScript黑洞數(shù)字之運(yùn)算路線查找算法,涉及JavaScript遞歸操作算法相關(guān)技巧,需要的朋友可以參考下2016-01-01
使用localForage實(shí)現(xiàn)帶過期時間的本地存儲方案
在前端開發(fā)中,我們經(jīng)常需要將數(shù)據(jù)存儲在客戶端,以減少網(wǎng)絡(luò)請求次數(shù),提高用戶體驗(yàn),localStorage 和 sessionStorage 是常用的存儲方案,但它們有一些局限性,為了解決這些問題,本文將介紹如何使用 localForage 實(shí)現(xiàn)一個帶過期時間的本地存儲方案,需要的朋友可以參考下2024-09-09
使用JS實(shí)現(xiàn)圖片展示瀑布流效果的實(shí)例代碼
下面小編就為大家?guī)硪黄褂肑S實(shí)現(xiàn)圖片展示瀑布流效果的實(shí)例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
微信小程序picker多列選擇器(mode = multiSelector)
本文主要介紹了微信小程序picker多列選擇器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
幾乎每個app都會用到底部導(dǎo)航的,相對于小程序而言自然也是如此了,這篇文章主要給大家介紹了關(guān)于微信小程序底部tabBar遮擋內(nèi)容的簡單處理方法,需要的朋友可以參考下2021-08-08
webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載
這篇文章主要介紹了webpack學(xué)習(xí)筆記之優(yōu)化緩存、合并、懶加載，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
javascript學(xué)習(xí)筆記之10個原生技巧
首先在這里要非常感謝無私分享作品的網(wǎng)友們，這些代碼片段主要由網(wǎng)友們平時分享的作品代碼里面和經(jīng)常去逛網(wǎng)站然后查看源文件收集到的。把平時網(wǎng)站上常用的一些實(shí)用功能代碼片段通通收集起來，方便網(wǎng)友們學(xué)習(xí)使用，利用好的話可以加快網(wǎng)友們的開發(fā)速度，提高工作效率。2014-05-05
正好最近在學(xué)習(xí)webpack的源碼,所以下面這篇文章主要給大家介紹了關(guān)于webpack源碼中一些精妙的方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
這篇文章主要為大家詳細(xì)介紹了javascript跨域資源共享的相關(guān)資料，感興趣的朋友可以參考一下2016-07-07
JavaScript實(shí)現(xiàn)選擇框按比例拖拉縮放的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)選擇框按比例拖拉縮放的方法,具有等比例縮放及設(shè)置最小范圍等功能,涉及javascript事件的添加、監(jiān)聽、頁面元素動態(tài)操作及鼠標(biāo)事件的響應(yīng)等技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08