PhotoSwipe异步动态加载图片方法


Posted in Javascript onAugust 25, 2016

在开发搜房家居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}]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
JavaScript知识点整理
Dec 09 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 #Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 #Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 #Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 #Javascript
jQuery组件easyui对话框实现代码
Aug 25 #Javascript
You might like
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
JS高级笔记
2011/07/13 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
js简单抽奖代码
2015/01/16 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
Vue组件通信的四种方式汇总
2018/02/08 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python变量和数据类型详解
2017/02/15 Python
python机器学习之神经网络(三)
2017/12/20 Python
python实现websocket的客户端压力测试
2019/06/25 Python
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
有个性的自我评价范文
2013/11/15 职场文书
教师绩效工资方案
2014/02/01 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
会计专业自荐书
2014/07/08 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
nginx 配置缓存
2022/05/11 Servers