PhotoSwipe异步动态加载图片方法

在开发搜房家居M站的时候,搜房家居装修效果图相册展示效果需要用到photoswipe插件显示图片特点: 1. 家居提供的接口,每次只能获取一张图片 2. 装修效果图的张数不限。 3. 从photoswipe用法来看,在photoswipe初始化前必须把所有图片列出。 photoswipe.attach( window.document.querySelectorAll('#gallery a'),options );

标签a是photoswipe初始化前的, 之后再往gallery里动态添加是无效的。

目前的方案是先调用10次接口,列出10张图片,当展示完这10张图片后,通过网址跳转下一页,展示下一组的10个图片

这种方案的

优点

是 1. 容易实现。

缺点

也很是明显: 1. 每次跳转下一页都会让用户等待比较长的时间。(10次调用接口的时间+当前图片下载到客户端的时间+其他时间) 2. 在图片左右滑动的过程中,突然再来年页面跳转也影响了用户体验。 如何优化photoswipe实现不分页跳转。 用过photoswipe的人都应该了解photoswipe.EventTypes.ondisplayImage。每次显示一个图片都会触发这个事件,

rush:js;"> instance.addEventHandler(photoswipe.EventTypes.ondisplayImage,function(e){ //在这里实现一些代码功能。 });

通过研究发现通过e.target.cache.images可以访问所以展示的图片对象集合。这样思路就比较清晰了—“先定义足够的a占位,然后在图片滑动显示的过程中不断地通过AJAX逐个获取图片的地址,然后赋值e.target.cache.images图片集合中的相应图片。”

下面代码是这个思路方法的实现(为了方便说明这个思路,略去了其中额外细节)

rush:xhtml;">

通过侦听PhotoSwipe.EventTypes.onDisplayImage事件,修改e.target.cache.images,以实现在图片未下载前更正占位图片的地址。

index.php?c=jiaju&a=ajaxNextPicInfo&picid={picid参数} 返回内容。根据picid的不同每调用一次返回一条图片的相关信息。

代码如下:
.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...