html photoswipe原理,PhotoSwipe异步动态加载图片方法
在开发搜房家居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图片集合中的相应图片。”
下面代码是这个思路方法的实现(为了方便说明这个思路,略去了其中额外细节)
通过侦听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}]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html photoswipe原理,PhotoSwipe异步动态加载图片方法相关推荐
- PhotoSwipe异步动态加载图片
在开发搜房家居M站的时候,搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片. 特点: 1. 家居提供的接口,每次只能获取一张图片 2. 装修效果图的张数不限. 3. 从Phot ...
- android listview动态加载网络图片不显示,Android Listview异步动态加载网络图片
Android Listview异步动态加载网络图片 详见: http://blog.sina.com.cn/s/blog_62186b460100zsvb.html 标签: Android SDK ...
- html动态加载图片,javascript实现瀑布流动态加载图片原理
本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下 鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 js实现瀑布流效果-动态加载图片 2. CSS代码 ...
- Android:ViewPager详解(异步网络加载图片,带图片缓存,并带导航小圆点)
android 应用中,如欢迎指引页面, 和图片轮播功能, 或者更多的内容在一页显示不了,要分成多个页面,这时候viewpager是很好用的. 首先看下效果: 下面是一个例子,带异步网络加载图片,并带 ...
- Delphi FastReport动态加载图片
Delphi FastReport动态加载图片 2011-01-06 作者:李海彬 阅读:684 以前用FastReport制作报表,从来没有打印过图片,这段时间做了个打印个人简历的 ...
- vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用 代码如下: <el-table-column align="center" label="宠物图片& ...
- 列表异步线程加载图片
手机客户端以列表形式展示数据是非常常见的一种方式.然而列表中要显示图片(比如:头像)就要采用异步线程加载的方式,这样做是为了防止加载图片数据的时候,花费时间过长,阻塞UI线程,从而达到保持App的流畅 ...
- vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法 参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...
- jQuery页面滚动 动态加载图片等元素
相信大家见过好多随着页面滚动,动态加载图片等元素的网站,我也是,以前见了好多,只是没时间去研究,今天晚上有空,百度了一下找了一个jquery插件,作者张鑫旭,效果挺好,代码也很简单,使用更方便,废话不 ...
最新文章
- Android Studio上手,基于VideoView的本地文件及流媒体播放器
- MDK 的编译过程及文件类型全解
- centos6.5搭建php网站,Centos6.5下搭建web环境(Apache+mysql+php+phpMyAdmin)
- [error]Cannot create __weak reference in file using manual refer XCode7.3
- Unity3d鼠标点击屏幕来控制人物的走动
- 分享一个数据产品经理的PRD
- webpack是什么?为什么要用webpack(一个小白的感想)
- mysql多数据库_mysql 多端口及主从数据库
- C# Socket编程 通过线程方式的异步
- 常用算法案例之贪心法(C语言)
- java 中文转拼音_java中文转拼音
- python批量解压rar和zip的压缩包
- 实验一:基于HMM的拼音转汉字程序|自然语言
- epoll底层原理深究
- android开发split的方法在String中的特殊使用
- 英语常见缩写,职业,公司
- IoT通讯技术选型及模型设计的思考
- crmeb打通版开源微信公众号小程序商城框架源码
- android蓝牙连接回调没反应,Android蓝牙套接字连接无法正常工作
- 从照片的三维重建(3D Reconstruction)——MVS系列(1)