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 相关文章推荐
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
js判断是否是手机页面
Mar 17 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
vue的$http的get请求要加上params操作
Nov 12 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
第四章 php数学运算
2011/12/30 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python3爬楼梯算法示例
2019/03/04 Python
python实现图片中文字分割效果
2019/07/22 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
汽车检测与维修专业求职信
2013/10/30 职场文书
企业给企业的表扬信
2014/01/13 职场文书
参赛口号
2014/06/16 职场文书
小学生运动会广播
2015/08/19 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
nginx静态资源的服务器配置方法
2022/07/07 Servers
python解析照片拍摄时间进行图片整理
2022/07/23 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS