主要对mui图片全屏预览插件做了以下三点补充

1.添加了预览图片文字说明,使用的时候需要添加以下cssDOM属性

			.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)的优化的更多相关文章

  1. mui 图片预览

    1. 图片放大滑动预览需要    mui.zoom.js   mui.previewimage.js 2. 调用  mui.previewImage(); 3. 滑动过程中禁止图片缩放  注释掉下面代 ...

  2. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  3. JS魔法堂之实战:纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  4. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  5. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. 普通图片预览及demo(非分块)

    演示地址: http://codeman35.itongyin.com:19003/v2/image.html 功能:通过加载大图预览,这种方式无法和google art 比较.只能应用于简单的图片预 ...

  7. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  8. MVC 图片预览

    1.页面cshtml <form name="frmInput" id="frmInput" method="post" action ...

  9. js 图片预览

    图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...

随机推荐

  1. Legolas工业自动化平台入门(二)数据响应动作

    在上一篇文章Legolas工业自动化平台入门(一)搭建应用里,我们简单地提到了"动作"的概念.不清楚的童鞋不要着急,这篇我们就来介绍如何在Legolas平台上添加动作,并应用动作. ...

  2. 【MVC 过滤器的应用】ASP.NET MVC 如何统计 Action 方法的执行时间

    代码如下: using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; u ...

  3. Java获取路径方法&相对路径读取xml文件方法

    (1).request.getRealPath("/");//不推荐使用获取工程的根路径 (2).request.getRealPath(request.getRequestURI ...

  4. Adroid学习系列-入门(1)

    1.  安装 安装Eclipse,安装Adroid插件.安装Adroid SDK. 2.  项目目录说明 2.1.       建立Adroid项目 与一般的Java项目一样 )src文件夹是项目的所 ...

  5. 编写高质量JS代码的68个有效方法(十)

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  6. 剑指架构师系列-InnoDB存储引擎、Spring事务与缓存

    事务与锁是不同的.事务具有ACID属性: 原子性:持久性:由redo log重做日志来保证事务的原子性和持久性,一致性:undo log用来保证事务的一致性隔离性:一个事务在操作过程中看到了其他事务的 ...

  7. [Node.js] Express的测试覆盖率

    原文地址:http://www.moye.me/2014/12/03/express_coverage/ 引子 有群友问到Express怎么做 单元测试/覆盖率测试,这是上篇所遗漏的,特此补上 Exp ...

  8. Shell基础整理

     Shell的作用是将用户输入的文本命令转换成内核能识别的数据指令交给内核进行执行,内核需要翻译成二进制交由CPU底层来执行     用户层->Shell->调用对应应用程序->ke ...

  9. 队列的链式存储方式的实现(Java语言描述)

    链队列的结构示意图: 先进先出. QueueInterface.java//操作方法接口 package 队列的实现; public interface QueueInterface { public ...

  10. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...