Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-11 00:14:50 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Try the lozad lazy loader

Browse source
This commit is contained in:
RainLoop 2017-09-21 01:18:41 +03:00
parent 16ca116b30
commit 4f19d9fd56
7 changed files with 41 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

45
dev/Model/Message.js
View file

@ -4,9 +4,11 @@ import $ from '$';
import ko from 'ko';
import moment from 'moment';
import classnames from 'classnames';
import lozad from 'lozad';
import {MessagePriority, SignedVerifyStatus} from 'Common/Enums';
import {i18n} from 'Common/Translator';
import {DATA_IMAGE_LAZY_PLACEHOLDER_PIC} from 'Common/Consts';
import {
pInt, inArray, isArray, isUnd, trim,
@ -743,11 +745,28 @@ class MessageModel extends AbstractModel
if (this.body)
{
$('.lazy.lazy-inited[data-original]', this.body).each(function() {
$(this).attr('src', $(this).attr('data-original')).removeAttr('data-original'); // eslint-disable-line no-invalid-this
$(this).attr('src', $(this).attr('data-original')) // eslint-disable-line no-invalid-this
.removeAttr('data-original').removeAttr('data-loaded');
});
}
}
lozad() {
lozad('img.lazy:not(.lazy-inited)', {
threshold: 0.4,
load: (element) => {
// console.log('lazy', element.dataset.original);
element.src = DATA_IMAGE_LAZY_PLACEHOLDER_PIC;
$(element)
.addClass('lazy-inited')
.attr('src', element.dataset.original)
.removeAttr('data-loaded')
.css({opacity: 0.3})
.animate({opacity: 1}, 500);
}
}).observe();
}
showExternalImages(lazy = false) {
if (this.body && this.body.data('rl-has-images'))
{
@ -762,11 +781,13 @@ class MessageModel extends AbstractModel
$this
.addClass('lazy')
.attr('data-original', $this.attr(attr))
.removeAttr('data-loaded')
.removeAttr(attr);
}
else
{
$this.attr('src', $this.attr(attr)).removeAttr(attr);
$this.attr('src', $this.attr(attr))
.removeAttr('data-loaded').removeAttr(attr);
}
});
@ -780,13 +801,7 @@ class MessageModel extends AbstractModel
if (lazy)
{
$('img.lazy', this.body).addClass('lazy-inited').lazyload({
'threshold': 400,
'effect': 'fadeIn',
'skip_invisible': false,
'container': $('.RL-MailMessageView .messageView .messageItem .content')[0]
});
this.lozad();
$win.resize();
}
@ -867,16 +882,8 @@ class MessageModel extends AbstractModel
if (lazy)
{
(function($oImg, oContainer) {
_.delay(() => {
$oImg.addClass('lazy-inited').lazyload({
'threshold': 400,
'effect': 'fadeIn',
'skip_invisible': false,
'container': oContainer
});
}, 300);
}($('img.lazy', self.body), $('.RL-MailMessageView .messageView .messageItem .content')[0]));
// $('.RL-MailMessageView .messageView .messageItem .content')[0]
_.delay(() => this.lozad(), 300);
}
windowResize(500);