java中的接口是类吗
258
2023-07-08
PhotoSwipe异步动态加载图片方法
在开发搜房ZnMwoO家居M站的时候,搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片。
特点:
1. 家居提供的接口,每次只能获取一张图片
2. 装修效果图的张数不限。
3. 从PhotoSwipe用法来看,在PhotoSwipe初始化前必须把所有图片列出。
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
标签a是PhotoSwipe初始化前的, 之后再往Gallery里动态添加是无效的。
目前的方案是先调用10次接口,列出10张图片,当展示完ZnMwoO这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图片集合中的相应图片。”
下面代码是这个思路方法的实现(为了方便说明这个思路,略去了其中额外细节)
<!-- 可以依要求加多个上面的占位a标签-->
通过侦听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}]
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~