From 50d862e5d100eb490658f78e63c6010e42c58aec Mon Sep 17 00:00:00 2001
From: Roeland Jago Douma <rullzer@owncloud.com>
Date: Fri, 4 Dec 2015 10:42:11 +0100
Subject: [PATCH] [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!
---
 core/js/jquery.avatar.js   | 61 +++++++++++++++++++++++++-------------
 settings/js/users/users.js |  3 +-
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/core/js/jquery.avatar.js b/core/js/jquery.avatar.js
index 552657877e..7e97550ba1 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 {
+				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);
+			}
+
+			var img = new Image();
+
+			// If the new image loads successfull set it.
+			img.onload = function() {
 				$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+'">');
-				}
+				$div.text('');
+				$div.append(img);
 			}
-			if(typeof callback === 'function') {
-				callback();
-			}
-		});
+
+			img.width = size;
+			img.height = size;
+			img.src = url;
+		}
 	};
 }(jQuery));
diff --git a/settings/js/users/users.js b/settings/js/users/users.js
index c20a21b060..aeecac7b24 100644
--- a/settings/js/users/users.js
+++ b/settings/js/users/users.js
@@ -65,8 +65,7 @@ var UserList = {
 		 * Avatar or placeholder
 		 */
 		if ($tr.find('div.avatardiv').length){
-			$tr.find('.avatardiv').imageplaceholder(user.name, user.displayname);
-			$('div.avatardiv', $tr).avatar(user.name, 32);
+			$('div.avatardiv', $tr).avatar(user.name, 32, undefined, undefined, undefined, user.displayname);
 		}
 
 		/**