update to v1.0.8 再次优化了图片预览逻辑，这回改用分页显示的方法避免了一次加载过多的图片导致假死

target/classes/META-INF/maven/kohgylw/kiftd/pom.properties

@@ -1,5 +1,5 @@
 #Generated by Maven Integration for Eclipse
-#Sun Nov 04 16:34:40 CST 2018
+#Thu Nov 08 10:10:22 CST 2018
 version=1.0.7-RELEASE
 groupId=kohgylw
 m2e.projectName=kiftd

webContext/home.html

@@ -581,8 +581,9 @@
 <script type="text/javascript" src="js/jsencrypt.min.js"></script>
 <!-- 图片查看器 -->
 <script type="text/javascript" src="js/viewer.min.js"></script>
+<script type="text/javascript" src="js/jquery-viewer.min.js"></script>
 <!-- 音乐播放器 -->
 <script type="text/javascript" src="js/APlayer.min.js"></script>
 <!-- 页面操作定义 -->
-<script type="text/javascript" src="js/home.js"></script>
+<script type="text/javascript" src="js/home.min.js"></script>
 </html>

webContext/js/home.js

@@ -2,6 +2,7 @@
  * home.js kiftd主页面操作定义 by 青阳龙野 该文件为home.html的操作定义文件，包含了kiftd页面上的主要操作实现。
  */
 
+//所用val名称列表，注意不要冲突，其中一些参数能够设定界面行为。
 var locationpath = "root";// 记录当前文件路径
 var parentpath = "null";// 记录当前文件路径的父级目录
 var ap;// 音乐播放器对象
@@ -14,7 +15,13 @@ var constraintLevel;// 当前文件夹限制等级
 var account;// 用户账户
 var isUpLoading=false;// 是否正在执行其他上传操作
 var xhr;// 文件上传请求对象
+var viewerPageSize = 15; // 显示图片页的最大长度，注意最好是奇数
+var viewer; // viewer对象，用于预览图片功能
+var viewerPageIndex; // 分页预览图片——已浏览图片页号
+var viewerTotal; // 分页预览图片——总页码数
+var pvl;//预览图片列表的JSON格式对象
 
+//界面功能方法定义
 // 页面初始化
 $(function() {
 	getServerOS();// 得到服务器操作系统信息
@@ -1282,31 +1289,23 @@ function showPicture(fileId) {
 		dataType : "text",
 		success : function(result) {
 			if (result != "ERROR") {
-				var pvl = eval("(" + result + ")");
+				pvl = eval("(" + result + ")");
 				// TODO 整合viewer.js插件
-				var imageslist = document.createElement("ul");
-				var pictureViewList=pvl.pictureViewList;
-				var viewer;
-				$.each(pictureViewList, function(n, val) {
-					var image = new Image();
-					// 判断直接显示原图还是请求压缩流
-					if(val.filePath.startsWith("homeController")){
-						image.src=val.filePath;
-					}else{
-						image.src="fileblocks/"+val.filePath;
+				if(pvl.pictureViewList.length <= viewerPageSize) {
+					createViewList();// 以全列方式显示图片列表
+				} else {
+					// 以分页方式显示图片列表
+					viewerPageIndex = Math.ceil((pvl.index + 1) / viewerPageSize);
+					viewerTotal = Math.ceil(pvl.pictureViewList.length / viewerPageSize);
+					createViewListByPage();
+					var innerIndex = pvl.index - ((viewerPageIndex - 1) * viewerPageSize);
+					if(viewerPageIndex > 1) {
+						innerIndex++;
 					}
-					image.alt = val.fileName;
-					var imagerow = document.createElement("li");
-					imagerow.appendChild(image);
-					imageslist.appendChild(imagerow);
-				});
-				viewer = new Viewer(imageslist, {
-					hidden : function() {
-						viewer.destroy();
-					},
-				});
-				viewer.view(pvl.index);
-				viewer.show();
+					viewer.viewer('view', innerIndex);
+					viewer.viewer('show', true);
+				}
+				// end
 			} else {
 				alert("错误：无法定位要预览的文件或该操作未被授权。");
 			}
@@ -1317,6 +1316,83 @@ function showPicture(fileId) {
 	});
 }
 
+// 用于创建并显示小于2*limit+1长度的图片列表
+function createViewList() {
+	if(viewer == null) {
+		var images = document.createElement("ul");
+		for(var i = 0; i < pvl.pictureViewList.length; i++) {
+			if(pvl.pictureViewList[i].filePath.startsWith("homeController")){
+				$(images).append("<li><img src='" + pvl.pictureViewList[i].filePath + "' alt='" + pvl.pictureViewList[i].fileName + "' /></li>");
+			}else{
+				$(images).append("<li><img src='fileblocks/" + pvl.pictureViewList[i].filePath + "' alt='" + pvl.pictureViewList[i].fileName + "' /></li>");
+			}
+		}
+		viewer = $(images);
+		viewer.viewer({
+			loop: false,
+			hidden: function() {
+				viewer.data('viewer').destroy();
+				viewer = null;
+			}
+		});
+	}
+	viewer.viewer('view', pvl.index);
+	viewer.viewer('show', true);
+}
+
+// 用于创建长于2*limit+1长度的图片分页列表
+function createViewListByPage() {
+	// 初始化分页结构
+	if(viewer == null) {
+		var images = document.createElement("ul");
+		var startIndex = (viewerPageIndex - 1) * viewerPageSize;
+		if(viewerPageIndex > 1) {
+			$(images).append("<li><img src='css/left.png' alt='上一页' /></li>");
+		}
+		for(var i = 0; i < viewerPageSize && i < (pvl.pictureViewList.length - (viewerPageIndex - 1) * viewerPageSize); i++) {
+			if(pvl.pictureViewList[i].filePath.startsWith("homeController")){
+				$(images).append("<li><img src='" + pvl.pictureViewList[i].filePath + "' alt='" + pvl.pictureViewList[i].fileName + "' /></li>");
+			}else{
+				$(images).append("<li><img src='fileblocks/" + pvl.pictureViewList[i].filePath + "' alt='" + pvl.pictureViewList[i].fileName + "' /></li>");
+			}
+		}
+		if(viewerPageIndex < viewerTotal) {
+			$(images).append("<li><img src='css/right.png' alt='下一页' /></li>");
+		}
+		viewer = $(images);
+		viewer.viewer({
+			loop: false,
+			view: function(event) {
+				// 点击的计数为event.detail.index;
+				if(event.detail.index == 0 && viewerPageIndex != 1) {
+					viewerPageIndex--;
+					viewer.data('viewer').destroy();
+					viewer.empty();
+					viewer = null;
+					createViewListByPage();
+					if(viewerPageIndex > 1){
+						viewer.viewer('view',viewerPageSize);
+					}else{
+						viewer.viewer('view',viewerPageSize - 1);
+					}
+				} else if(event.detail.index == viewerPageSize + 1 || (event.detail.index == viewerPageSize && viewerPageIndex == 1)) {
+					viewerPageIndex++;
+					viewer.data('viewer').destroy();
+					viewer.empty();
+					viewer = null;
+					createViewListByPage();
+					viewer.viewer('view',1);
+				}
+			},
+			hidden: function() {
+				viewer.data('viewer').destroy();
+				viewer.empty();
+				viewer = null;
+			}
+		});
+	}
+}
+
 // 选中某一行文件，如果使用Shift点击则为多选
 function checkfile(fileId) {
 	if (!window.event.shiftKey) {

webContext/js/jquery-viewer.min.js

@@ -0,0 +1,10 @@
+/*!
+ * jQuery Viewer v1.0.0
+ * https://github.com/fengyuanchen/jquery-viewer
+ *
+ * Copyright (c) 2018 Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2018-04-01T05:58:29.617Z
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("jquery"),require("viewerjs")):"function"==typeof define&&define.amd?define(["jquery","viewerjs"],t):t(e.jQuery,e.Viewer)}(this,function(d,v){"use strict";if(d=d&&d.hasOwnProperty("default")?d.default:d,v=v&&v.hasOwnProperty("default")?v.default:v,d.fn){var e=d.fn.viewer,c="viewer";d.fn.viewer=function(o){for(var e=arguments.length,u=Array(1<e?e-1:0),t=1;t<e;t++)u[t-1]=arguments[t];var s=void 0;return this.each(function(e,t){var r=d(t),i="destroy"===o,n=r.data(c);if(!n){if(i)return;var f=d.extend({},r.data(),d.isPlainObject(o)&&o);n=new v(t,f),r.data(c,n)}if("string"==typeof o){var a=n[o];d.isFunction(a)&&((s=a.apply(n,u))===n&&(s=void 0),i&&r.removeData(c))}}),void 0!==s?s:this},d.fn.viewer.Constructor=v,d.fn.viewer.setDefaults=v.setDefaults,d.fn.viewer.noConflict=function(){return d.fn.viewer=e,this}}});