diff --git a/dev/Common/Consts.js b/dev/Common/Consts.js index d5a40db69..2e3f5f18f 100644 --- a/dev/Common/Consts.js +++ b/dev/Common/Consts.js @@ -39,9 +39,3 @@ export const RAINLOOP_TRIAL_KEY = 'RAINLOOP-TRIAL-KEY'; /* eslint max-len: 0 */ 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 1561fb1c2..c64a352da 100644 --- a/dev/Model/Message.js +++ b/dev/Model/Message.js @@ -2,11 +2,9 @@ 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, @@ -17,7 +15,6 @@ import { isNonEmptyArray } from 'Common/Utils'; -import { $win } from 'Common/Globals'; import { messageViewLink, messageDownloadLink } from 'Common/Links'; import FolderStore from 'Stores/User/Folder'; @@ -627,8 +624,6 @@ class MessageModel extends AbstractModel { * @param {boolean=} print = false */ viewPopupMessage(print = false) { - this.showLazyExternalImagesInBody(); - const timeStampInUTC = this.dateTimeStampInUTC() || 0, ccLine = this.ccToLine(false), m = 0 < timeStampInUTC ? moment.unix(timeStampInUTC) : null; @@ -731,34 +726,6 @@ class MessageModel extends AbstractModel { return this; } - showLazyExternalImagesInBody() { - if (this.body) { - $('.lazy.lazy-inited[data-original]', this.body).each(function() { - $(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') - .removeAttr('data-original') - .css({ opacity: 0.3 }) - .animate({ opacity: 1 }, 500); - } - }).observe(); - } - showExternalImages(lazy = false) { if (this.body && this.body.data('rl-has-images')) { this.hasImages(false); @@ -768,13 +735,9 @@ class MessageModel extends AbstractModel { $('[' + attr + ']', this.body).each(function() { const $this = $(this); // eslint-disable-line no-invalid-this if (lazy && $this.is('img')) { - $this - .addClass('lazy') - .attr('data-original', $this.attr(attr)) - .removeAttr('data-loaded'); - } else { - $this.attr('src', $this.attr(attr)).removeAttr('data-loaded'); + $this.attr('loading', 'lazy'); } + $this.attr('src', $this.attr(attr)).removeAttr('data-loaded'); }); attr = this.proxy ? 'data-x-additional-style-url' : 'data-x-style-url'; @@ -785,11 +748,6 @@ class MessageModel extends AbstractModel { $this.attr('style', style + $this.attr(attr)); }); - if (lazy) { - this.lozad(); - $win.trigger('resize'); - } - windowResize(500); } } @@ -805,11 +763,7 @@ class MessageModel extends AbstractModel { attachment = self.findAttachmentByCid($this.attr('data-x-src-cid')); if (attachment && attachment.download) { - if (lazy && $this.is('img')) { - $this.addClass('lazy').attr('data-original', attachment.linkPreview()); - } else { - $this.attr('src', attachment.linkPreview()); - } + $this.attr('src', attachment.linkPreview()); } }); @@ -822,10 +776,9 @@ class MessageModel extends AbstractModel { if (attachment && attachment.download) { if (lazy && $this.is('img')) { - $this.addClass('lazy').attr('data-original', attachment.linkPreview()); - } else { - $this.attr('src', attachment.linkPreview()); + $this.attr('loading', 'lazy'); } + $this.attr('src', attachment.linkPreview()); } }); @@ -846,11 +799,6 @@ class MessageModel extends AbstractModel { } }); - if (lazy) { - // $('.RL-MailMessageView .messageView .messageItem .content')[0] - setTimeout(() => this.lozad(), 300); - } - windowResize(500); } } diff --git a/package.json b/package.json index da57f0ef3..225933933 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,6 @@ "js-cookie": "2.2.1", "knockout": "3.4.2", "knockout-sortable": "1.2.0", - "lozad": "1.14.0", "moment": "2.24.0", "node-fs": "0.1.7", "normalize.css": "8.0.1", diff --git a/yarn.lock b/yarn.lock index 5ec69418c..baa60c0d1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4491,11 +4491,6 @@ loose-envify@^1.0.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" -lozad@1.14.0: - version "1.14.0" - resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.14.0.tgz#91d51d57e53187e95c5b7f4029d7a28a0e940e10" - integrity sha512-uMGxpXBW15JDGVly3p121Y4jlb/OwmXpnMQR5vnb4GxMeK45NGcmlMrRr47fmLxtSdnGRFm0YdJaVXuudPKDaA== - lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"