PhotoSwipe异步动态加载图片方法

网络编程 2024/9/24 佚名

3 1 2

在开发搜房家居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"src"] = url;//把图片地址赋值给PhotoSwipe的图片集合中相应对象属性
      $(needSetImg.metaData.item).data('comment','');//其他附加内容通过这样设置
    })
  }
});

index.php"codetitle">复制代码代码如下:[{"img":http://img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]

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

PhotoSwipe异步动态加载图片,PhotoSwipe动态加载图片,PhotoSwipe异步动态加载,PhotoSwipe动态加载

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“PhotoSwipe异步动态加载图片方法”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年09月24日

PhotoSwipe异步动态加载图片方法

深入浅出ES6之let和const命令

相册展示PhotoSwipe.js插件实现

评论“PhotoSwipe异步动态加载图片方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接