[Avatars] JS should not load same avatar twice

Old code first dit an ajax request to the avatar. Then a new image
object with the same src was created and since we do not cache avatars
yet :(  this resulted in 2 sequential requests to the exact same URL

Now if you set the displayname it will first set the placeholder and
then load the avatar in the background. Only once this time!

1 files changed, 40 insertions, 19 deletions

diff --git a/core/js/jquery.avatar.js b/core/js/jquery.avatar.js
index 552657877e7..7e97550ba17 100644
--- a/core/js/jquery.avatar.js
+++ b/core/js/jquery.avatar.js
@@ -47,7 +47,7 @@
  */
 
 (function ($) {
-	$.fn.avatar = function(user, size, ie8fix, hidedefault, callback) {
+	$.fn.avatar = function(user, size, ie8fix, hidedefault, callback, displayname) {
 		if (typeof(size) === 'undefined') {
 			if (this.height() > 0) {
 				size = this.height();
@@ -79,30 +79,51 @@
 			'/avatar/{user}/{size}',
 			{user: user, size: Math.ceil(size * window.devicePixelRatio)});
 
-		$.get(url, function(result) {
-			if (typeof(result) === 'object') {
-				if (!hidedefault) {
-					if (result.data && result.data.displayname) {
-						$div.imageplaceholder(user, result.data.displayname);
+		// If the displayname is not defined we use the old code path
+		if (typeof(displayname) === 'undefined') {
+			$.get(url, function(result) {
+				if (typeof(result) === 'object') {
+					if (!hidedefault) {
+						if (result.data && result.data.displayname) {
+							$div.imageplaceholder(user, result.data.displayname);
+						} else {
+							// User does not exist
+							$div.imageplaceholder(user, 'X');
+							$div.css('background-color', '#b9b9b9');
+						}
 					} else {
-						// User does not exist
-						$div.imageplaceholder(user, 'X');
-						$div.css('background-color', '#b9b9b9');
+						$div.hide();
 					}
 				} else {
-					$div.hide();
+					$div.show();
+					if (ie8fix === true) {
+						$div.html('<img width="' + size + '" height="' + size + '" src="'+url+'#'+Math.floor(Math.random()*1000)+'">');
+					} else {
+						$div.html('<img width="' + size + '" height="' + size + '" src="'+url+'">');
+					}
 				}
-			} else {
-				$div.show();
-				if (ie8fix === true) {
-					$div.html('<img width="' + size + '" height="' + size + '" src="'+url+'#'+Math.floor(Math.random()*1000)+'">');
-				} else {
-					$div.html('<img width="' + size + '" height="' + size + '" src="'+url+'">');
+				if(typeof callback === 'function') {
+					callback();
 				}
+			});
+		} else {
+			// We already have the displayname so set the placeholder (to show at least something)
+			if (!hidedefault) {
+				$div.imageplaceholder(displayname);
 			}
-			if(typeof callback === 'function') {
-				callback();
+
+			var img = new Image();
+
+			// If the new image loads successfull set it.
+			img.onload = function() {
+				$div.show();
+				$div.text('');
+				$div.append(img);
 			}
-		});
+
+			img.width = size;
+			img.height = size;
+			img.src = url;
+		}
 	};
 }(jQuery));