小云菜
小云菜
  • 发布:2016-01-27 18:43
  • 更新:2016-01-27 18:43
  • 阅读:21030

mui图片预览(perviewimage)的优化

分类:MUI

mui图片预览(perviewimage)的优化

更好的显示效果看这http://www.cnblogs.com/phillyx/p/5164231.html
主要对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

6 关注 分享
地图 飞向月球8 blood Trust bughunter 7***@qq.com

要回复文章请先登录注册

郑先生

郑先生

回复 绝啾啾 :
[图片预览标题](http://ask.dcloud.net.cn/article/975)
2016-10-26 18:10
绝啾啾

绝啾啾

回复 郑先生 :
能给个源代码么,谢谢
2016-10-13 18:46
6***@qq.com

6***@qq.com

Safari里用了之后保存不了图片了,怎么回事儿啊?
2016-09-20 15:15
郑先生

郑先生

回复 小云菜 :
嗯 确实是那个preview的js里还要改代码。效果实现了,不过文字是随着图片移动而移动的,效果不是很理想。我又自己弄了弄 改到外层的footer里了,固定在下方,类似那个header的1/1
2016-05-17 17:18
小云菜

小云菜 (作者)

回复 郑先生 :
js 是不是不对?
2016-04-26 21:41
郑先生

郑先生

试了下图片预览添加文字说明,并没有效果,是不是少了点啥= =
2016-04-26 18:25
饭饭120710

饭饭120710

预览图片退出后图片所在的webview页面这个缩小了,是怎么回事
2016-03-20 22:06
小云菜

小云菜 (作者)

回复 虚若影 :
官方写错了,是destory
官方github没更新
2016-02-24 19:14
虚若影

虚若影

退出预览的时候报错,Uncaught TypeError: Object #<d> has no method 'destroy',
destroy是什么东西,没看到呢
2016-02-24 15:57