Removed lozad. Lazy loading of images. A browser can itself these days.

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';

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
+					$this.attr('loading', 'lazy');
-						.addClass('lazy')
-						.attr('data-original', $this.attr(attr))
-						.removeAttr('data-loaded');
-				} else {
-					$this.attr('src', $this.attr(attr)).removeAttr('data-loaded');
 				}
+				$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,12 +763,8 @@ 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());
 				}
-				}
 			});
 
 			$('[data-x-src-location]', this.body).each(function() {
@@ -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());
+						$this.attr('loading', 'lazy');
-					} else {
-						$this.attr('src', attachment.linkPreview());
 					}
+					$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);
 		}
 	}

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",

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"