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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
地震发生中逃生十大法则
May 12 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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在各种web服务器的运行模式详解
2013/06/03 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python模拟三级菜单效果
2017/09/11 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
行政部主管岗位职责
2013/12/28 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
市场安全管理制度
2014/01/26 职场文书
校庆标语集锦
2014/06/25 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫