From 4f19d9fd564eadc93e40c2016d78d4cfac2a5873 Mon Sep 17 00:00:00 2001 From: RainLoop Date: Thu, 21 Sep 2017 01:18:41 +0300 Subject: [PATCH] Try the lozad lazy loader --- .eslintrc.js | 2 +- dev/Common/Consts.js | 2 ++ dev/Model/Message.js | 45 +++++++++++++++++++++++++------------------- dev/boot.js | 1 + gulpfile.js | 2 +- package.json | 2 ++ yarn.lock | 8 ++++++++ 7 files changed, 41 insertions(+), 21 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 2b72199e2..4b8cd2065 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -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, diff --git a/dev/Common/Consts.js b/dev/Common/Consts.js index 56b48b3b6..9199e528c 100644 --- a/dev/Common/Consts.js +++ b/dev/Common/Consts.js @@ -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'; diff --git a/dev/Model/Message.js b/dev/Model/Message.js index dcaec99b7..4d8a0c227 100644 --- a/dev/Model/Message.js +++ b/dev/Model/Message.js @@ -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); diff --git a/dev/boot.js b/dev/boot.js index 2fb116e85..565019d95 100644 --- a/dev/boot.js +++ b/dev/boot.js @@ -22,6 +22,7 @@ window.progressJs.onbeforeend(() => { }); require('json3'); +require('intersection-observer'); require('../vendors/modernizr/modernizr-custom.js'); require('Common/Booter'); diff --git a/gulpfile.js b/gulpfile.js index 4626b6e32..76ac623ad 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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) diff --git a/package.json b/package.json index b45a21fea..0b53bff16 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index f516de72b..0fb28dfbc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"