PhotoSwipe异步动态加载图片
在开发搜房家居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="http://img1n.soufunimg.com/viewimage/zxb/2014_06/30/82/86/pic/000711232400/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_04/18/31/94/pic/000664552500/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/05/75/33/pic/005426525600/800x800.png"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_02/12/13/15/pic/007331476000/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_05/06/44/99/pic/004717983300/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2013_12/26/68/74/pic/003539926900/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_06/26/64/20/pic/005089500900/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_05/06/23/73/pic/004716773600/800x800.jpg"></a></li>
<li><a href="http://img1n.soufunimg.com/viewimage/zxb/2014_05/09/43/37/pic/002581572500/800x800.jpg"></a></li>
<!-- 以下是占位a标签-->
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/common_m/m_public/images/loading.gif"></a></li>
<li><a href="http://js.soufunimg.com/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"}]
PhotoSwipe异步动态加载图片的更多相关文章
- Unty3D动态加载图片
试验动态加载图片,代码如下: using UnityEngine; using System.Collections; public class DynamicLoad : MonoBehaviour ...
- ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
- asp.net向后台传参数动态加载图片
//向后台传参数动态加载图片 $(function() { $("#Button1").click(function() { var stockcode = getUrlParam ...
- vue动态加载图片,取消格式验证
vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...
- 【MFC】picture控件 两种有细微差别的动态加载图片方法
摘自:http://www.jizhuomi.com/software/193.html VS2010/MFC编程入门之二十七(常用控件:图片控件Picture Control) 分类标签: 编程入门 ...
- Unity3D-NGUI动态加载图片
NGUI提供了很方便的UIAtlas,其主要作用是改进DrawCall,把众多图片整合在一张贴图上,由于UNITY3D简单易用的好处,所以只是用原生的GUI很容易忽视DrawCall的问题,所以NGU ...
- Vue动态加载图片图片不显示
图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...
- vue动态加载图片
如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...
- vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据
需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 ...
随机推荐
- Node.js meitulu图片批量下载爬虫1.06版
//====================================================== // https://www.meitulu.com图片批量下载Node.js爬虫1. ...
- Centos系统信息及日志
1.确认内核版本: #uname -r #uname -a 2.确认发行版本: #cat /etc/redhat-release 3.查看系统载入的模块: #lsmod | grep XXX 载入一个 ...
- 网络编程——C10K简述
C10K问题 网络服务在处理数以万计的客户端连接时,往往出现效率底下甚至完全瘫痪,这被成为C10K问题. (C10K = connection 10 kilo 问题).k 表示 kilo,即 10 ...
- jQuery 创建html
jQuery 创建html
- redis源代码分析(5)——aof
前面几篇基本介绍了redis的主要功能.流程.接下来是一些相对独立的部分,首先看一下持久化. redis持久化支持两种方式:RDB和AOF,我们首先看一下AOF的实现. AOF(Append only ...
- SoC嵌入式软件架构设计之六:API设计方法
在嵌入式系统中,驱动都是以API的方式提供给应用进行调用.这里介绍嵌入式系统的API设计和管理方法. 驱动在系统中会按模块进行分类,比如按键驱动.LCD驱动.文件系统.card驱动.I2C驱动等等:每 ...
- Ubuntu系统进程绑定CPU核
Ubuntu系统进程绑定CPU核 作者:chszs.版权全部,未经允许,不得转载. 博主主页:http://blog.csdn.net/chszs 本文讲述如何在Ubuntu系统中,把指定的进程绑定到 ...
- Objective-C(十七、KVC键值编码及实例说明)——iOS开发基础
结合之前的学习笔记以及參考<Objective-C编程全解(第三版)>,对Objective-C知识点进行梳理总结.知识点一直在变,仅仅是作为參考,以苹果官方文档为准~ 十七.键值编码 K ...
- Loadrunner Analysis之Web Page Diagnostics
Loadrunner Analysis之Web Page Diagnostics 分类: LoadRunner 性能测试 2012-12-31 18:47 1932人阅读 评论(2) 收藏 举报 di ...
- CStdioFile类学习笔记<转>
本文转自:http://www.cnblogs.com/JiMuStudio/archive/2011/07/17/2108496.html CStdioFile类的声明保存再afx.h头文件中. ...