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