Added "loading X..." text to thumbnails

public_html/css/post-list.css

@@ -55,6 +55,7 @@
 	background: white;
 }
 
+
 .post-small a:focus,
 .post-small a:hover {
 	background: #64C2ED;
@@ -63,8 +64,8 @@
 	outline: 0;
 }
 
-.post-small a:focus img,
+.post-small a:focus img:not(.loading),
-.post-small a:hover img {
+.post-small a:hover img:not(.loading) {
 	opacity: .8 !important;
 }
 

public_html/js/Presenters/UserListPresenter.js

@@ -80,9 +80,9 @@ App.Presenters.UserListPresenter = function(
 				user: user,
 				formatRelativeTime: util.formatRelativeTime,
 			}) + '</li>');
-			util.loadImagesNicely($item.find('img'));
 			$target.append($item);
 		});
+		_.map(_.map($target.find('img'), jQuery), util.loadImagesNicely);
 	}
 
 	return {

public_html/js/Util.js

@@ -26,9 +26,29 @@ App.Util = function(_, jQuery, marked, promise) {
 
 	function loadImagesNicely($img) {
 		if (!$img.get(0).complete) {
-			$img.css('opacity', '0');
+			$img.addClass('loading');
+			$img.css({opacity: 0});
+			var $div = jQuery('<div>Loading ' + $img.attr('alt') + '&hellip;</div>');
+			var width = $img.width();
+			var height = $img.height();
+			if (width > 50 && height > 50) {
+				$div.css({
+					position: 'absolute',
+					width: width + 'px',
+					height: height + 'px',
+					color: 'rgba(0, 0, 0, 0.15)',
+					zIndex: -1,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					textAlign: 'center'});
+				$div.insertBefore($img);
+				$div.offset($img.offset());
+			}
 			$img.bind('load', function() {
 				$img.animate({opacity: 1}, 'fast');
+				$img.removeClass('loading');
+				$div.fadeOut($div.remove);
 			});
 		}
 	}