MUI - 图片预览(perviewimage)的优化
主要对mui
图片全屏预览插件做了以下三点补充
1.添加了预览图片文字说明,使用的时候需要添加以下css
及DOM
属性
.mui-slider-img-content {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
color: white;
text-align: center;
line-height: 21px
}
<img src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="2" data-content="这里是文字说明"/>
2.如果图片过宽或过长,预加载图片(上一张或下一张)时,会和当前显示的图片重叠
原来的效果是这样
主要对缩放进行了更改
proto._initImgData = function(itemData, imgEl) {
if (!itemData.sWidth) {
var img = itemData.el;
itemData.sWidth = img.offsetWidth;
itemData.sHeight = img.offsetHeight;
var offset = $.offset(img);
itemData.sTop = offset.top;
itemData.sLeft = offset.left;
//缩放判断,解决预加载图片时,图片过大,和当前显示图片重叠的问题
//未更改之前缩放比例能达到2.5倍以上
var scale = Math.max(itemData.sWidth / window.innerWidth, itemData.sHeight / window.innerHeight);
itemData.sScale = scale > 1 ? 0.977 : scale;
}
imgEl.style.webkitTransform = 'translate3d(0,0,0) scale(' + itemData.sScale + ')';
};
3.解决了预加载页面返回(mui.back)重新加载数据并打开时,预览无用的问题
主要应用场景是这样的:
- view是预加载的,返回时view隐藏,DOM重置,
- 如果不清除当前预览对象previmage的话,加载数据后打开当前页面,重新调用mui.previewImage()无效,依然是第一次的预览的
DOM
结果 - 因为插件源码决定了该对象是不变的
var previewImageApi = null;
$.previewImage = function(options) {
if (!previewImageApi) {
previewImageApi = new PreviewImage(options);
}
return previewImageApi;
};
- 有朋友会问,为毛要预加载,为什么不通过loadurl或其他方式刷新页面(或DOM)?
- 就为了优化性能,秒开页面,整个详情页的代码前前后后改了一个多星期
- 我不可能因为插件的不完整而放弃优化的成果。
- 所以就有了以下的代码
//释放当前对象及清除DOM
proto.dispose = function() {
var prevdom = document.getElementById("__MUI_PREVIEWIMAGE");
prevdom && prevdom.parentNode.removeChild(prevdom);
previewImageApi = null;
};
具体代码在这https://github.com/phillyx/mui/blob/master/examples/hello-mui/examples/imageviewer.html
MUI - 图片预览(perviewimage)的优化的更多相关文章
- mui 图片预览
1. 图片放大滑动预览需要 mui.zoom.js mui.previewimage.js 2. 调用 mui.previewImage(); 3. 滑动过程中禁止图片缩放 注释掉下面代 ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- JS魔法堂之实战:纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- js实现图片预览
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 普通图片预览及demo(非分块)
演示地址: http://codeman35.itongyin.com:19003/v2/image.html 功能:通过加载大图预览,这种方式无法和google art 比较.只能应用于简单的图片预 ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- MVC 图片预览
1.页面cshtml <form name="frmInput" id="frmInput" method="post" action ...
- js 图片预览
图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...
随机推荐
- 微信、qq时间格式模板
产品近来蛋疼,时间格式从做完到现在改了四遍了 ,最新的要求如下: * 2分钟内 无显示 * 2分钟-24小时 HH:mm * 昨天 昨天 HH:mm * 前天 前天 HH:mm * 今年 MM:DD ...
- Hashing Trick
本博客已经迁往http://www.kemaswill.com/, 博客园这边也会继续更新, 欢迎关注~ 在机器学习领域, kernel trick是一种非常有效的比较两个样本(对象)的方法. 给定两 ...
- [C++] memset 和sizeof 的使用注意
因为使用C++写小题目时经常需要清除数组,这里记录下Memset函数的sizeof运算符的使用注意. memset的特点是:将给定地址后连续的内存(包括给定地址),逐个byte初始化为参数中指明的值. ...
- 10个TWaver 网页3D可视化精彩案例
以下网页3D案例均为TWaver原创出品,推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行.案例排名不分先后,如需Demo,可直接申请试用. 1. 化学元素 ...
- css的两种引用方式 link和@import
学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...
- 网络通信分享(二):外网ip和内网ip
一.内网ip包括两类: 1:tcp/ip协议中,专门保留了三个IP地址区域作为私有地址,其地址范围如下: 10.0.0.0/8:10.0.0.0-10.255.255.255 172.16.0.0/ ...
- Python开源框架Scrapy安装及使用
一.安装问题 环境: CentOS + Python 2.7 + Pip 1) 安装时遇到 ”UnicodeDecodeError: 'ascii' codec can't decode byte ...
- 免费下载!Twitter Bootstrap V3 矢量界面素材
Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...
- ASP.NET MVC 使用 IOC框架 AutoFac 自动释放数据库资源
每次使用using或者dispose来释放资源会比较麻烦,作为一个会偷懒的程序员来说当然不能接受了. 一.引用 autofac.dll和autofac.integration.mvc.dll 二.打开 ...
- ecshop的Mysql操作类
摘要,这是直接摘抄的ecshop的mysql操作类:不过他这里的缓存是用的文件缓存,我们如果想直接使用,可以替换成memcache的或者redis的! <?php /** * ECSHOP MY ...