add loading img for thumbnails

src/main/webapp/WEB-INF/view/searchResults.jsp

@@ -29,14 +29,14 @@
 				<li id="result${s.index}">
 					<div class="media">
 						<c:if test="${thumbnailSupport}">
-						<div class="thumbnailBox media-left hidden-xs-down">
-							<a class="link" href="${doc.url_link}" data-uri="${doc.url_link}"
-								data-id="${doc.doc_id}" data-order="${s.index}">
-								<img
-									src="${f:url('/thumbnail/')}?docId=${f:u(doc.doc_id)}&queryId=${f:u(queryId)}"
+							<div class="thumbnailBox media-left hidden-xs-down">
+								<a class="link" href="${doc.url_link}"
+									data-uri="${doc.url_link}" data-id="${doc.doc_id}"
+									data-order="${s.index}"> <img src="/images/blank.png"
+									data-src="${f:url('/thumbnail/')}?docId=${f:u(doc.doc_id)}&queryId=${f:u(queryId)}"
 									class="thumbnail">
-							</a>
-						</div>
+								</a>
+							</div>
 						</c:if>
 						<div class="media-body">
 							<h3 class="title ellipsis media-heading">

src/main/webapp/css/style.css

@@ -239,6 +239,13 @@ body.search #searchOptions.active, body.help #searchOptions.active,  body.error
 	border-radius: 0px;
 }
 
+.thumbnail {
+	width: 160px;
+	height: 160px;
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+}
+
 /* Large desktop */
 @media ( min-width : 74.9em) {
 	.visible-xs {

src/main/webapp/js/search.js

@@ -196,8 +196,30 @@ $(function() {
 						searchForm : $('#searchForm')
 					});
 
-	$('img.thumbnail', $result).error(function() {
-		$(this).attr("src", contextPath + "/images/noimage.png");
+	IMG_LOADING_DELAY = 5000;
+	IMG_LOADING_MAX = 5;
+	var loadImage = function(img, url, limit) {
+		var imgData = new Image();
+		$(imgData).on("load", function() {
+			$(img).css('background-image', '');
+			$(img).attr('src', url);
+		});
+		$(imgData).error(function() {
+			if (limit > 0) {
+				setTimeout(function() {
+					loadImage(img, url, --limit);
+				}, IMG_LOADING_DELAY);
+			} else {
+				$(img).attr('src', contextPath + "/images/noimage.png");
+			}
+			imgData = null;
+		});
+		imgData.src = url;
+	};
+
+	$('img.thumbnail').each(function() {
+		$(this).css('background-image', 'url("' + contextPath + '/images/loading.gif")');
+		loadImage(this, $(this).attr('data-src'), IMG_LOADING_MAX);
 	});
 
 });