Try the lozad lazy loader

Author: RainLoop

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

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

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

dev/boot.js

@@ -22,6 +22,7 @@ window.progressJs.onbeforeend(() => {
 });
 
 require('json3');
+require('intersection-observer');
 require('../vendors/modernizr/modernizr-custom.js');
 require('Common/Booter');
 

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)

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

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"
 
+[email protected]:
+  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"