[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!

diff --git a/core/js/jquery.avatar.js b/core/js/jquery.avatar.js
index 552657877e7c7c46fbf492aad6355a0973f7a8e1..7e97550ba1714a2400c2ac51d0dec0cd8706a7ad 100644 (file)
--- 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));

diff --git a/settings/js/users/users.js b/settings/js/users/users.js
index c20a21b060a2dc4472ea1367fdff1758ec207d9a..aeecac7b24308b6be24c5b5d83012e08b360074c 100644 (file)
--- 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);
                }
 
                /**