Changeset - d2f20f3d2117
[Not reviewed]
default
0 3 0
domruf - 8 years ago 2017-08-13 15:43:03
dominikruf@gmail.com
gravatar: use background-image style instead of img element for gravatar

When having several 1000 users, chrome will fail to load all the gravatar img
elements on the _admin/users page (ERR_INSUFFICIENT_RESOURCES).

If instead we use a background-image style, chrome will only load the images of
the elements that are actually displayed.
3 files changed with 7 insertions and 3 deletions:
0 comments (0 inline, 0 general)
kallithea/lib/helpers.py
Show inline comments
 
@@ -878,8 +878,9 @@ def gravatar(email_address, cls='', size
 
    if src:
 
        # here it makes sense to use style="width: ..." (instead of, say, a
 
        # stylesheet) because we using this to generate a high-res (retina) size
 
        html = ('<img alt="" class="{cls}" style="width: {size}px; height: {size}px" src="{src}"/>'
 
            .format(cls=cls, size=size, src=src))
 
        html = ('<i class="icon-empty {cls}"'
 
                ' style="font-size: {size}px;background-size: {size}px;background-image: url(\'{src}\')"'
 
                '></i>').format(cls=cls, size=size, src=src)
 

	
 
    else:
 
        # if src is empty then there was no gravatar, so we use a font icon
kallithea/public/css/contextbar.css
Show inline comments
 
@@ -11,6 +11,7 @@ i[class^='icon-'] {
 
    margin: -2px 0 -4px 0;
 
    /* background-color: red; /* for debugging */
 
}
 
/* Note: class 'icon-empty' can be used to get this styling without an actual glyph */
 

	
 
/* css classes for diff file status ... it'd be nice if css had a way to
 
   inherit from another class but alas, we must make sure this content is the
kallithea/public/js/base.js
Show inline comments
 
@@ -1083,7 +1083,9 @@ var gravatar = function(gravatar_lnk, si
 
    if (gravatar_lnk == 'default') {
 
        return '<i class="icon-user {1}" style="font-size: {0}px;"></i>'.format(size, cssclass);
 
    }
 
    return '<img alt="" class="{2}" style="width: {0}px; height: {0}px" src="{1}"/>'.format(size, gravatar_lnk, cssclass);
 
    return ('<i class="icon-empty {2}"' +
 
            ' style="font-size: {0}px;background-image: url(\'{1}\'); background-size: {0}px"' +
 
            '></i>').format(size, gravatar_lnk, cssclass);
 
}
 

	
 
var autocompleteGravatar = function(res, gravatar_lnk, size, group) {
0 comments (0 inline, 0 general)