tryout: introduce loading of images before rendering content and provide some detailed logging in js-console

2 files changed, 19 insertions, 3 deletions

diff --git a/view/js/main.js b/view/js/main.js
index d1bf34699..f75f1f095 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -617,7 +617,7 @@ function updateConvItems(mode,data) {
 
 	/* autocomplete @nicknames */
 	$(".comment-edit-form  textarea").editor_autocomplete(baseurl+"/acl?f=&n=1");
-
+/*
 	var bimgs = $(".wall-item-body img").not(function() { return this.complete; });
 	var bimgcount = bimgs.length;
 
@@ -631,6 +631,8 @@ function updateConvItems(mode,data) {
 	} else {
 		collapseHeight();
 	}
+*/
+	collapseHeight();
 
 }
 
@@ -666,6 +668,7 @@ function collapseHeight() {
 
 	var collapsedContentHeight = parseInt($("#region_2").height());
 	contentHeightDiff = origContentHeight - collapsedContentHeight;
+	console.log('collapseHeight() - contentHeightDiff: ' + contentHeightDiff + 'px');
 
 
 }
@@ -712,15 +715,24 @@ function liveUpdate() {
 		var orgHeight = $("#region_2").height();
 	}
 
+
+	var dstart = new Date();
+	console.log('LOADING data...');
 	$.get(update_url, function(data) {
+		var dready = new Date();
+		console.log('DATA ready in: ' + (dready - dstart)/1000 + ' seconds.');
+		console.log('LOADING images...');
+
+		$('.wall-item-body, .wall-photo-item',data).imagesLoaded( function() {
+		var iready = new Date();
+		console.log('IMAGES ready in: ' + (iready - dready)/1000 + ' seconds.');
+
 		page_load = false;
 		scroll_next = false;
 		updateConvItems(update_mode,data);
 		$("#page-spinner").spin(false);
 		$("#profile-jot-text-loading").spin(false);
 
-		console.log('contentHeightDiff: ' + contentHeightDiff);
-
 		if(update_mode === 'update') {
 			$(window).scrollTop($(window).scrollTop() + $("#region_2").height() - orgHeight + contentHeightDiff);
 		}
@@ -740,6 +752,9 @@ function liveUpdate() {
 		updateCountsOnly = true;
 		if(timer) clearTimeout(timer);
 		timer = setTimeout(NavUpdate,10);
+
+		});
+
 	});
 }
 
diff --git a/view/php/theme_init.php b/view/php/theme_init.php
index 49b3511c9..7c714ecd2 100644
--- a/view/php/theme_init.php
+++ b/view/php/theme_init.php
@@ -44,6 +44,7 @@ head_add_js('library/colorbox/jquery.colorbox-min.js');
 
 head_add_js('library/jquery.AreYouSure/jquery.are-you-sure.js');
 head_add_js('library/tableofcontents/jquery.toc.js');
+head_add_js('library/imagesloaded/imagesloaded.pkgd.min.js');
 /**
  * Those who require this feature will know what to do with it.
  * Those who don't, won't.