Improved image and thumbnail loading

TODO

@@ -2,9 +2,6 @@ This is transient file that lists functionalities to be implemented before
 first major release.
 
 everything related to posts:
-    - post listing
-        - better thumbnail loading
-
     - single post view
         - editing
             - ability to loop video posts
@@ -22,9 +19,6 @@ everything related to posts:
         - post notes should be visible in post edit history.
           (move post snapshot factory methods to PostService)
 
-everything related to users:
-    - better avatar loading
-
 everything related to tags:
     - tag listing
     - tag autocompletion (difficult)

public_html/css/post-list.css

@@ -32,6 +32,8 @@
 }
 .post-small img {
 	display: block;
+	border: 0;
+	background: white;
 }
 
 .post-small a:focus,

public_html/js/Presenters/GlobalCommentListPresenter.js

@@ -83,6 +83,7 @@ App.Presenters.GlobalCommentListPresenter = function(
 				postTemplate: templates.post,
 			}) + '</li>');
 
+			util.loadImagesNicely($post.find('img'));
 			var presenter = App.DI.get('postCommentListPresenter');
 
 			presenter.init({

public_html/js/Presenters/PostCommentListPresenter.js

@@ -100,6 +100,7 @@ App.Presenters.PostCommentListPresenter = function(
 			canEditComment: auth.isLoggedIn(comment.user.name) ? privileges.editOwnComments : privileges.editAllComments,
 			canDeleteComment: auth.isLoggedIn(comment.user.name) ? privileges.deleteOwnComments : privileges.deleteAllComments,
 		}) + '</li>');
+		util.loadImagesNicely($item.find('img'));
 		$targetList.append($item);
 		$item.find('a.edit').click(function(e) {
 			e.preventDefault();

public_html/js/Presenters/PostListPresenter.js

@@ -92,10 +92,12 @@ App.Presenters.PostListPresenter = function(
 		}
 
 		_.each(posts, function(post) {
-			$target.append(jQuery('<li>' + templates.listItem({
+			var $post = jQuery('<li>' + templates.listItem({
 				searchArgs: searchArgs,
 				post: post,
-			}) + '</li>'));
+			}) + '</li>')
+			util.loadImagesNicely($post.find('img'));
+			$target.append($post);
 		});
 	}
 

public_html/js/Presenters/UserListPresenter.js

@@ -77,10 +77,12 @@ App.Presenters.UserListPresenter = function(
 		}
 
 		_.each(users, function(user) {
-			$target.append(jQuery('<li>' + templates.listItem({
+			var $item = jQuery('<li>' + templates.listItem({
 				user: user,
 				formatRelativeTime: util.formatRelativeTime,
-			}) + '</li>'));
+			}) + '</li>');
+			util.loadImagesNicely($item.find('img'));
+			$target.append($item);
 		});
 	}
 

public_html/js/Presenters/UserPresenter.js

@@ -70,6 +70,7 @@ App.Presenters.UserPresenter = function(
 			canChangeBrowsingSettings: userBrowsingSettingsPresenter.getPrivileges().canChangeBrowsingSettings,
 			canChangeAccountSettings: _.any(userAccountSettingsPresenter.getPrivileges()),
 			canDeleteAccount: userAccountRemovalPresenter.getPrivileges().canDeleteAccount}));
+		util.loadImagesNicely($el.find('img'));
 		userBrowsingSettingsPresenter.render();
 		userAccountSettingsPresenter.render();
 		userAccountRemovalPresenter.render();

public_html/js/Util.js

@@ -24,6 +24,13 @@ App.Util = function(_, jQuery, promise) {
 		return exitConfirmationEnabled;
 	}
 
+	function loadImagesNicely($img) {
+		$img.css('opacity', '0');
+		$img.bind('load', function() {
+			$img.animate({opacity: 1}, 'fast');
+		});
+	}
+
 	function parseComplexRouteArgs(args) {
 		var result = {};
 		args = (args || '').split(/;/);
@@ -189,6 +196,7 @@ App.Util = function(_, jQuery, promise) {
 		disableExitConfirmation: disableExitConfirmation,
 		isExitConfirmationEnabled: isExitConfirmationEnabled,
 		transparentPixel: transparentPixel,
+		loadImagesNicely: loadImagesNicely,
 	};
 
 };

public_html/templates/comment-list-item.tpl

@@ -4,7 +4,7 @@
 			<a href="#/user/<%= comment.user.name %>">
 		<% } %>
 
-		<img class="author-avatar"
+		<img width="40" height="40" class="author-avatar"
 			src="/data/thumbnails/40x40/avatars/<%= comment.user.name || '!' %>"
 			alt="<%= comment.user.name || 'Anonymous user' %>"/>
 

public_html/templates/history.tpl

@@ -13,7 +13,7 @@
 						<a href="#/user/<%= userName %>">
 					<% } %>
 
-					<img class="author-avatar"
+					<img width="20" height="20" class="author-avatar"
 						src="/data/thumbnails/20x20/avatars/<%= userName || '!' %>"
 						alt="<%= userName || 'Anonymous user' %>"/>
 

public_html/templates/home.tpl

@@ -35,7 +35,7 @@
 						<a href="#/user/<%= post.user.name %>">
 					<% } %>
 
-					<img class="author-avatar"
+					<img width="25" height="25" class="author-avatar"
 						src="/data/thumbnails/25x25/avatars/<%= post.user.name || '!' %>"
 						alt="<%= post.user.name || 'Anonymous user' %>"/>
 

public_html/templates/post-list-item.tpl

@@ -7,7 +7,7 @@
 		<% } %>
 		title="<%= _.map(post.tags, function(tag) { return '#' + tag.name; }).join(', ') %>">
 
-		<img class="thumb" src="/data/thumbnails/160x160/posts/<%= post.name %>" alt="<%= post.idMarkdown %>"/>
+		<img width="160" height="160" class="thumb" src="/data/thumbnails/160x160/posts/<%= post.name %>" alt="<%= post.idMarkdown %>"/>
 
 		<% if (post.favoriteCount || post.score || post.commentCount) { %>
 			<div class="info">

public_html/templates/post.tpl

@@ -89,7 +89,7 @@
 				<a href="#/user/<%= post.user.name %>">
 			<% } %>
 
-			<img class="author-avatar"
+			<img width="40" height="40" class="author-avatar"
 				src="/data/thumbnails/40x40/avatars/<%= post.user.name || '!' %>"
 				alt="<%= post.user.name || 'Anonymous user' %>"/>
 

public_html/templates/user-list-item.tpl

@@ -1,6 +1,6 @@
 <div class="user">
 	<a href="#/user/<%= user.name %>">
-		<img src="/data/thumbnails/80x80/avatars/<%= user.name %>" alt="<%= user.name %>"/>
+		<img width="80" height="80" src="/data/thumbnails/80x80/avatars/<%= user.name %>" alt="<%= user.name %>"/>
 	</a>
 	<div class="details">
 		<h1>

public_html/templates/user.tpl

@@ -3,7 +3,7 @@
 
 	<div class="top">
 		<div class="side">
-			<img src="/data/thumbnails/100x100/avatars/<%= user.name %>" alt="Avatar"/>
+			<img width="100" height="100" src="/data/thumbnails/100x100/avatars/<%= user.name %>" alt="Avatar"/>
 			<br/>
 			<%= user.name %>
 		</div>