移动端JS图片查看器开发：滑动、加载与队列实现

移动端JS图片查看器开发详解

本文分享了一个JavaScript图片查看器插件的使用案例，旨在帮助开发者制作适用于手机端的网页图片查看功能，供参考学习。

近期，我为项目开发了一个定制版的图片查看器，目前已初步完成基本需求。

开发场景设定为：在一个包含多文件下载的列表中，当检测到某些文件为图片时，点击该文件即可打开图片查看器。此时，列表中的其他图片也会被加入查看器队列，支持前后滑动查看及其他附加功能。

乍看之下，这些功能点似乎较多且复杂，需要仔细梳理。

功能点梳理

首先，需要获取被点击的图片文件对象，以及符合条件的图片文件集合。

其次，制作图片查看器界面，并展示图片队列。

接着，实现图片的友好加载方式。

最后，实现图片查看器的触摸滑动功能，以及滑动后的相关交互。

经过简单整理，功能点似乎并不复杂。

制作手机网页图片查看器

根据上述功能点，为正式开发做好准备。

HTML结构与样式配置

首先，我们需要为已知列表容器内的图片文件添加统一标识。由于文件是否为图片及图片路径在存储时已知，可以直接为元素添加统一属性。

其次，制作一个全屏灰色背景，用于展示图片队列，并以“NO./n”的形式标注当前展示图片的位置。所有样式均已给出，此处不再一一细说（figure样式内的部分属性为swipe.js所必需）。


.dialog,.dialog figure{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1001;}
.dialog section{height:100%;background:#333;-webkit-opacity:0.7;}

.dialog footer{padding:10px;position:absolute;bottom:0;left:0;right:0;z-index:1002;font-size:13px;}
.dialog footer span{padding:0 20px;float:right;border:1px solid #999;border-radius:15px;color:#ddd;}

.dialog figure{overflow:hidden;}
.dialog figure ul{height:100%;overflow:hidden;}
.dialog figure li{width:100%;height:100%;display:-webkit-box;float:left;position:relative;-webkit-box-pack:center;-webkit-box-align:center;}
.dialog figure img{max-width:100%;max-height:100%;margin:10px;}

然后，初始化时将图片直接替换为loading.gif图片，随后进行动态加载。

最后，学习使用swipe.js轻量级触摸滑动插件，先进行调用。


var obj = document.getElementById('swipe');
window.mySwipe = Swipe(obj, {
 ...
});

配置参数


startSlide  : 0, //起始位置
auto    : 3000, //自动播放时间
continuous  : true, //无限循环; 个人建议所有项个数不确定时赋值false, 不然为2的时候很2
disableScroll : false, //触摸时禁止滚屏
callback   : function(index, element){}, //滑动时回调函数, 参数为滑动元素排序与对象
transitionEnd : function(index, element){} //滑动完成后回调函数, 参数同上

API方法


prev(); //上一页
next(); //下一页
getPos(); //当前页索引
getNumSlides(); //所有项个数
slide(index, duration); //滑动效果

基本html结构


<figure id="swipe">
 <ul>
  <li></li>
 </ul>
</figure>

必须的css属性


figure{overflow:hidden;position:relative;}
figure ul{overflow:hidden;}
figure li{width:100%;float:left;position:relative;}

无论体积还是文档，swipe.js都很轻巧，十分简单容易上手。

swipe.min.js下载

核心JavaScript逻辑实现

完整开发正式开始

我们通过列表的统一触发事件，获取触发对象的url属性。如果该属性存在，则调用图片查看器，并停止后续进入下载界面的程序。


$('.download a').click(function(){
 var obj = $(this);
 var url = obj.attr('url');
 if(url && url.length > 0){
  var set = $('.download a[url]');
  base_module.dialog(obj, set);
  return false;
 };

 ...
});

现在进入数据收集完毕后的加工处理环节，首先展示我们的对象模型，包括对象模型的属性及方法的定义规则。


var base_module = (function(){
 var base = {};
 base.options = {
  LOCK : false
 };

 base.fn = function(){
  ...
 };

 return base;
})();

编写图片查看器主函数


/**
 * 图片查看器
 * @param object obj 操作对象
 * @param object set 对象集
 */
base.dialog = function(obj, set){
 var i = set.index(obj); //当前页索引
 var rel = set.length; //所有项个数
 var html = '<section class="dialog"><section></section><figure id="swipe"><ul>'; //开始绘制图片查看器
 set.each(function(){
  var url = $(this).attr('url'); //图片路径
  html += '<li><img src="loading.gif" width="40" height="40" url="' + url + '" /></li>'; //循环绘制图片列表
 });
 html += '</ul></figure><footer><span id="po">' + (i + 1) + '/' + rel + '</span></footer></section>'; //绘制结束

 $('body').append(html); //渲染图片查看器
 //js文件加载状态
 base.loadJs('swipe.min.js', function(){
  base.swiper(i); //回调函数, swipe参数配置
 });

 var url = obj.attr('url');
 //图片加载状态
 base.loadImg(url, function(){
  base.imager(i); //回调函数, 图片展示
 });
};

按需加载swipe.js


/**
 * 按需加载js
 * @param string url 文件路径
 * @param object fn 回调函数
 */
base.loadJs = function(url, fn){
 if(typeof Swipe != 'undefined'){
  if(fn) fn();
  return false;
 };

 var js = document.createElement('script');
 js.src = url;
 document.getElementsByTagName('head')[0].appendChild(js);

 js.onload = function(){
  if(fn) fn();
 };
};

配置swipe.js参数


/**
 * 幻灯片配置
 * @param int i 当前页索引
 */
base.swiper = function(i){
 var obj = document.getElementById('swipe');
 window.mySwipe = Swipe(obj, {
  startSlide : i,
  continuous : false,
  disableScroll : true,
  callback  : function(index, element){
   var i = index + 1;
   var s = $('#swipe li').length;
   $('#po').text(i + '/' + s);

   var url = $(element).find('img').attr('url');
   base.loadImg(url, function(){
    base.imager(index);
   });
  }
 });
};

按需加载图片


/**
 * 按需加载img
 * @param string url 文件路径
 * @param object fn 回调函数
 */
base.loadImg = function(url, fn){
 var img = new Image();
 img.src = url;
 if(img.complete){
  if(fn) fn();
  return false;
 };

 img.onload = function(){
  if(fn) fn();
 };
};

图片加载完成后展示


/**
 * 展示加载完图片
 * @param int i 当前页索引
 */
base.imager = function(i){
 var obj = $('#swipe li').eq(i).find('img');
 var url = obj.attr('url');
 obj.replaceWith('<img src="' + url + '" />');
};

目前还只是初步完工，后面还需优化完善，主要有以下几点：

图片查看器已绘制成功，关闭时不应该删除而是隐藏；重新调用查看器时，如图片列表没有变化则直接唤起而不必重新绘制；

图片不能放大收缩，宽高度过长情况下，预览效果会很差无法看清图片；

没有缩略图，开发时才发现我们存储图片时居然没有压缩处理图形，加载图片时流量太坑，当然这个问题本身首先要在后台存储时处理。

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

移动端JS图片查看器开发详解

移动端JS图片查看器开发详解

HTML结构与样式配置

核心JavaScript逻辑实现

实用工具推荐