Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

user-profiles: Lazy load profile pictures when in view. 

Using lazysizes we only load images if they are in view.
This decreases load time and save more bandwidth since images are loaded
after html is loaded and if they are on screen.

Fixes #3564.
This commit is contained in:
Priyank Patel 2018-06-24 21:28:14 +00:00 committed by Tim Abbott
parent 9c4ef94726
commit 6441ad0677
3 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/js/bundles/commons.js
View File

@ -10,6 +10,7 @@ import "js/common.js";
import "node_modules/moment/min/moment.min.js";
import "node_modules/moment-timezone/builds/moment-timezone-with-data.min.js";
import "node_modules/sortablejs/Sortable.js";
import "node_modules/lazysizes/lazysizes.js";
import "third/bootstrap/css/bootstrap.css";
import "third/bootstrap/css/bootstrap-btn.css";
import "third/bootstrap/css/bootstrap-responsive.css";

1
static/styles/zulip.scss
View File

@ -1535,6 +1535,7 @@ blockquote p {
vertical-align: top;
border-radius: 4px;
overflow: hidden;
background-color: hsl(0, 0%, 90%);
&.guest-avatar::after {
outline: 2px solid hsl(0, 0%, 100%);

2
static/templates/message_avatar.handlebars
View File

@ -1,3 +1,3 @@
<div class="u-{{msg/sender_id}} inline_profile_picture {{#sender_is_guest}} guest-avatar{{/sender_is_guest}}" aria-hidden="true">
<img src="{{small_avatar_url}}" alt="" class="no-drag"/>
<img data-src="{{small_avatar_url}}" alt="" class="lazyload no-drag"/>
</div>