主要对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)?
  • 就为了优化性能,秒开页面,整个详情页的代码前前后后改了一个多星期
  • 我不可能因为插件的不完整而放弃优化的成果。
  • 所以就有了以下的代码
    //释放当前对象及清除DOMproto.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

转载于:https://www.cnblogs.com/phillyx/p/5164231.html

MUI - 图片预览(perviewimage)的优化相关推荐

  1. mui 图片预览(自定义)功能 - 案例篇

    mui 图片预览(自定义)功能 - 案例篇 实现目标: 点击图片,弹出层遮盖,并放大显示刚才点击的图片: 图片对应的标题,也一并显示. 效果截图: 重要提示Tips: 使用前,务必设置图片的alt属性 ...

  2. uniapp swiper实现图片预览 预览一张图片加载前后两张 实现性能优化

    背景: 使用uniapp框架在做h5项目时,领导要求预览图片时不能一次性加载完所有的图片,需要看一张加载一张,这样用户不费流量,优化h5的性能. 首先uniapp官网实现图片预览使用的是uni.pre ...

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

    之前写的这个上传插件,同事们都觉得还不错,不过都觉得还不够完美,于是决定使用业余时间对此插件持续优化,可能你过段时间会发现,插件又增加了新功能什么的,请注意文章后面评论里的更新说明. 以前在上传的时候 ...

  4. php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能,1.实现原理直接见代码,需要一 - phpStudy...

    纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果 复制代码 代码 ...

  5. axios获取图片显示_Vue.js+axios图片预览以及上传显示进度

    在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目 基于Vue.js+axios ...

  6. H-ui.admin v3.1多图片预览上传的问题解决

    H-ui.admin v3.1多图片预览上传的问题解决 这个模板的多图片上传我搞了好久,之前忙的时候都放弃了模板给的多图片上传,现在有时间研究下终于解决了,话不多说上代码. (function( $ ...

  7. 有赞Vant组件库的引入及轮播图片预览的实现

    有赞Vant组件库的引入及轮播图片预览的实现 1.图片预览组件ImagePreview 这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可: ImagePre ...

  8. flutter -各类自定义弹窗(图片预览,输入框,键盘)以及如何阻止事件冒泡

    开局废话:由于公司app后期需要做混合开发,又担心h5的性能问题.于是迫不得已,只能两端齐搞,验证一些性能优化的问题.打开了一年前flutter正式发布时,蹭热度创建的现已布满藤蔓的仓库,微微颤抖的双 ...

  9. v-viewer预览图的使用(图片预览旋转/放大缩小/上下切换等)

    前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件.因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片i ...

最新文章

  1. 【Python】有道翻译的爬虫实现(前篇)
  2. 全中国一共有多少IP地址?
  3. Three.js中自定义控制几何体的点和面的属性
  4. PAT 1016 部分A+B
  5. springcloud~Eureka实例搭建
  6. 几种常用的排序方法7--希尔排序
  7. 在 2017 年将会更加流行的 6 个 Web 开发趋势
  8. Class.isAssignableFrom(Class clz)方法 与 instanceof 关键字的区别
  9. 2010年3月份第二周51aspx发布源码
  10. 【翻译】BCGControlBar Professional Edition for MFC v 29.0重大更新
  11. 从源码角度分析android事件分发处理机制
  12. Android 编译时出现r cannot be resolved to a variable
  13. 一些常用路由协议默认的AD值
  14. seaweedFS基本使用
  15. 树莓派Ubuntu18.04使用及联网
  16. gst 测试摄像头命令
  17. 操作系统和指弹吉他的联系
  18. Android 修改保持WLAN热点开启的时间与最大连接数
  19. 如何用c语言编辑定时关机程序有说明的,C语言编写的定时关机程序
  20. Go语言基本语法 (下)

热门文章

  1. 新能源车为什么不加变速箱解决高速高耗电的问题?
  2. 大众仪表板上为什么30km,50km处要标红?
  3. 洛克菲勒的逆商:如何在逆境中转换思维走向成功
  4. 如何让自己的视频号作品上热门
  5. 互联网时代的发展给实体业都造成了不小的冲击
  6. 好的程序员在通过单行道时会查看两边
  7. Qt——P7 对象树
  8. c# mysql数据集_C#第四次作业:MySQL数据库及C#操作MySQL数据库
  9. git 添加公钥的命令
  10. C++中的面向对象(二)