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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
两个Javascript小tip资料
Nov 23 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
js三种排序算法分享
Aug 16 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
vue实现文字加密功能
Sep 27 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实现框架(一)
2006/10/09 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
JavaScript入门基础
2015/08/12 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
使用Tkinter制作信息提示框
2020/02/18 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
护理不良事件检讨书
2014/02/06 职场文书
上课看小说检讨书
2014/02/22 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python