mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 07:35:55 +08:00
Try the lozad lazy loader
This commit is contained in:
RainLoop
parent
16ca116b30
commit
4f19d9fd56
|
|
@ -24,7 +24,7 @@ module.exports = {
|
|||
|
||||
// errors
|
||||
'no-cond-assign': [2, 'always'],
|
||||
'no-console': 2,
|
||||
'no-console': 0,
|
||||
'no-constant-condition': 2,
|
||||
'no-control-regex': 2,
|
||||
'no-debugger': 2,
|
||||
|
|
|
|||
|
|
@ -41,3 +41,5 @@ export const RAINLOOP_TRIAL_KEY = 'RAINLOOP-TRIAL-KEY';
|
|||
export const DATA_IMAGE_USER_DOT_PIC = 'data:image/png;base64,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';
|
||||
|
||||
export const DATA_IMAGE_TRANSP_PIC = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=';
|
||||
|
||||
export const DATA_IMAGE_LAZY_PLACEHOLDER_PIC = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC';
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ window.progressJs.onbeforeend(() => {
|
|||
});
|
||||
|
||||
require('json3');
|
||||
require('intersection-observer');
|
||||
require('../vendors/modernizr/modernizr-custom.js');
|
||||
require('Common/Booter');
|
||||
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ cfg.paths.js = {
|
|||
'node_modules/jquery/dist/jquery.min.js',
|
||||
'node_modules/jquery-mousewheel/jquery.mousewheel.js',
|
||||
'node_modules/jquery-scrollstop/jquery.scrollstop.js',
|
||||
'node_modules/jquery-lazyload/jquery.lazyload.js ',
|
||||
// 'node_modules/jquery-lazyload/jquery.lazyload.js',
|
||||
'node_modules/jquery-backstretch/jquery.backstretch.min.js',
|
||||
'vendors/jquery-ui/js/jquery-ui-1.10.3.custom.min.js', // custom
|
||||
'vendors/jquery-nanoscroller/jquery.nanoscroller.js', // custom (modified)
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@
|
|||
"gulp-util": "3.0.8",
|
||||
"gulp-zip": "4.0.0",
|
||||
"ifvisible.js": "1.0.6",
|
||||
"intersection-observer": "^0.4.2",
|
||||
"jquery": "2.2.4",
|
||||
"jquery-backstretch": "2.1.16",
|
||||
"jquery-lazyload": "1.9.7",
|
||||
|
|
@ -105,6 +106,7 @@
|
|||
"knockout-projections": "github:stevesanderson/knockout-projections#v1.1.0",
|
||||
"knockout-sortable": "0.14.1",
|
||||
"lightgallery": "1.2.21",
|
||||
"lozad": "1.0.2",
|
||||
"matchmedia-polyfill": "0.3.0",
|
||||
"moment": "2.18.1",
|
||||
"node-fs": "0.1.7",
|
||||
|
|
|
|||
|
|
@ -2876,6 +2876,10 @@ interpret@^1.0.0:
|
|||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0"
|
||||
|
||||
intersection-observer@^0.4.2:
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.4.2.tgz#24100ed620baf6a427072996d4d73366e9ec93ef"
|
||||
|
||||
invariant@^2.2.0, invariant@^2.2.2:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
|
||||
|
|
@ -3681,6 +3685,10 @@ loud-rejection@^1.0.0:
|
|||
currently-unhandled "^0.4.1"
|
||||
signal-exit "^3.0.0"
|
||||
|
||||
lozad@1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.0.2.tgz#9936b781f81592e2c8309e14e9556ad9bebb403d"
|
||||
|
||||
lru-cache@2:
|
||||
version "2.7.3"
|
||||
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.7.3.tgz#6d4524e8b955f95d4f5b58851ce21dd72fb4e952"
|
||||
|
|
|
|||
Loading…
Reference in a new issue