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 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
AngularJS 教程及实例代码
Oct 23 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
毕业生求职推荐信
2013/11/04 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
信息工作经验交流材料
2014/05/28 职场文书
单位委托书怎么写
2014/08/02 职场文书
创先争优活动心得体会
2014/09/04 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
内乡县衙导游词
2015/02/05 职场文书
求职自我评价怎么写
2015/03/09 职场文书
上班迟到检讨书
2015/05/06 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
springboot实现string转json json里面带数组
2022/06/16 Java/Android