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渐变发光导航菜单的实例代码
Mar 27 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
Element-UI+Vue模式使用总结
Jan 02 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 xml文件操作代码(一)
2009/03/20 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
js module大战
2019/04/19 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
wxPython 入门教程
2008/10/07 Python
Python操作列表的常用方法分享
2014/02/13 Python
Python实现两款计算器功能示例
2017/12/19 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
新浪微博实习心得体会
2014/01/27 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
文明寝室标语
2014/06/13 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
浅谈Node的内存泄露问题
2022/05/06 NodeJs