手机查看html文件图片丢失,移动端js图片查看器

最新推荐文章于 2024-10-23 15:55:18 发布

weixin_39731782

最新推荐文章于 2024-10-23 15:55:18 发布

阅读量508

点赞数

文章标签：手机查看html文件图片丢失

本文实例为大家分享了js图片查看器插件的使用方法，制作手机使用的网页图片查看器，供大家参考，具体内容如下

这几天抽空在为项目开发一个量身的图片查看器，目前已初步完成需求。

开发场景是：在一个多文件下载展示列表中，如检测某些文件为图片时，则点击该文件时打开图片查看器展示该图片，并将列表内其它图片同时展示查看器队列内，可供前后滑动查看及其它附带功能。

乍一听功能点似乎有点多而且有些复杂，需要梳理一下

功能点整理

首先，我们要获得点击的图片文件对象及符合条件的图片文件对象集

其次，图片查看器的制作及图片队列展示

然后，图片友好加载方式

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

简单整理了一下，好像也不多

制作手机网页图片查看器

根据功能点为正式开发做好准备

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

其次：制作一个全屏灰色背景，展示图片队列，并以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结构

必须的css属性

figure{overflow:hidden;position:relative;}

figure ul{overflow:hidden;}

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

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

完整开发正式开始

我们通过列表的统一触发事件，获取触发对象的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 = '

'; //开始绘制图片查看器

set.each(function(){

var url = $(this).attr('url'); //图片路径

html += '

'; //循环绘制图片列表

});

html += '' + (i + 1) + '/' + rel + ''; //绘制结束

$('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(' '%20+%20url%20+%20' ');

};

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

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

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

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

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

手机查看html文件 图片丢失,移动端js图片查看器

手机查看html文件图片丢失,移动端js图片查看器