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 Tools Dateinput使用介绍
Jul 14 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
javascript实现自由编辑图片代码详解
Jun 21 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
JavaScript进制转换实现方法解析
Jan 18 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
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php实现求相对时间函数
2015/06/15 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
javascript 常用方法总结
2009/06/03 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
js获取Get值的方法
2016/09/29 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python实现的自动发送消息功能详解
2019/08/15 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
python性能测试工具locust的使用
2020/12/28 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
书香家庭事迹材料
2014/05/09 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
任命书标准格式
2015/03/02 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang
MySQL索引失效场景及解决方案
2022/07/23 MySQL