add images load status to spinnner if preload images is enabled

2 files changed, 45 insertions, 29 deletions

diff --git a/view/js/main.js b/view/js/main.js
index c172b9365..6d084fdd2 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -749,10 +749,6 @@ function updateConvItems(mode,data) {
 	else
 		sse_bs_init();
 
-	// reset rotators and cursors we may have set before reaching this place
-
-	$('.like-rotator').hide();
-
 	if(commentBusy) {
 		commentBusy = false;
 		$('body').css('cursor', 'auto');
@@ -779,30 +775,39 @@ function updateConvItems(mode,data) {
 		mediaPlaying = false;
 	});
 
-	var bimgs = $(".wall-item-body img, .wall-photo-item img").not(function() { return this.complete; });
-	var bimgcount = bimgs.length;
-
-	if (bimgcount) {
-		bimgs.on('load',function() {
-			bimgcount--;
-			if (! bimgcount) {
-				collapseHeight();
-
-				if(bParam_mid && mode === 'replace')
-					scrollToItem();
-
-				$(document.body).trigger("sticky_kit:recalc");
-			}
+	if(! preloadImages) {
+		$('.wall-item-body, .wall-photo-item').imagesLoaded()
+		.always( function( instance ) {
+			//console.log('all images loaded');
+			collapseHeight();
+
+			if(bParam_mid && mode === 'replace')
+				scrollToItem();
+
+		})
+		.done( function( instance ) {
+			//console.log('all images successfully loaded');
+		})
+		.fail( function() {
+			//console.log('all images loaded, at least one is broken');
+		})
+		.progress( function( instance, image ) {
+			var result = image.isLoaded ? 'loaded' : 'broken';
+			//console.log( 'image is ' + result + ' for ' + image.img.src );
 		});
-	} else {
+	}
+	else {
 		collapseHeight();
 
 		if(bParam_mid && mode === 'replace')
 			scrollToItem();
-
-		$(document.body).trigger("sticky_kit:recalc");
 	}
 
+	// reset rotators and cursors we may have set before reaching this place
+	$('.like-rotator').hide();
+	$("#page-spinner").hide();
+	$("#profile-jot-text-loading").hide();
+
 	followUpPageLoad = true;
 
 }
@@ -999,16 +1004,16 @@ function liveUpdate(notify_id) {
 
 		if(update_mode === 'update' || preloadImages) {
 			console.log('LOADING images...');
+			$('.wall-item-body, .wall-photo-item',data).imagesLoaded()
+			.always( function( instance ) {
+				//console.log('all images loaded');
 
-			$('.wall-item-body, .wall-photo-item',data).imagesLoaded( function() {
 				var iready = new Date();
-				console.log('IMAGES ready in: ' + (iready - dready)/1000 + ' seconds.');
+				//console.log('IMAGES ready in: ' + (iready - dready)/1000 + ' seconds.');
 
 				page_load = false;
 				scroll_next = false;
 				updateConvItems(update_mode,data);
-				$("#page-spinner").hide();
-				$("#profile-jot-text-loading").hide();
 
 				// adjust scroll position if new content was added above viewport
 				if(update_mode === 'update' && !justifiedGalleryActive) {
@@ -1016,16 +1021,26 @@ function liveUpdate(notify_id) {
 				}
 
 				in_progress = false;
-
+				$('#image_counter').html('');
+
+			})
+			.done( function( instance ) {
+				//console.log('all images successfully loaded');
+			})
+			.fail( function() {
+				//console.log('all images loaded, at least one is broken');
+			})
+			.progress( function( instance, image ) {
+				$('#image_counter').html(instance.progressedCount + '/' + instance.images.length);
+				//var result = image.isLoaded ? 'loaded' : 'broken';
+				//console.log( 'image is ' + result + ' for ' + image.img.src );
 			});
+
 		}
 		else {
 			page_load = false;
 			scroll_next = false;
 			updateConvItems(update_mode,data);
-			$("#page-spinner").hide();
-			$("#profile-jot-text-loading").hide();
-
 			in_progress = false;
 
 		}
diff --git a/view/tpl/conv_frame.tpl b/view/tpl/conv_frame.tpl
index c6b3b0d9b..be74dea39 100755
--- a/view/tpl/conv_frame.tpl
+++ b/view/tpl/conv_frame.tpl
@@ -3,6 +3,7 @@
 <div id="conversation-end"></div>
 <div id="page-spinner" class="spinner-wrapper">
 	<div  class="spinner m"></div>
+	<div id="image_counter" class="text-muted text-center small"></div>
 </div>
 <div class="modal" id="conversation_settings" tabindex="-1" role="dialog" aria-labelledby="conversation_settings_label" aria-hidden="true">
 	<div class="modal-dialog">