Refactor the lazy loader for images

src/components/images/imageFetcher.js

@@ -1,47 +0,0 @@
-define(['dom'], function (dom) {
-    'use strict';
-
-    function loadImage(elem, url) {
-        if (!elem) {
-            return Promise.reject('elem cannot be null');
-        }
-
-        if (elem.tagName !== "IMG") {
-            elem.style.backgroundImage = "url('" + url + "')";
-            return Promise.resolve();
-        }
-        return loadImageIntoImg(elem, url);
-    }
-
-    function unloadImage(elem) {
-        if (!elem) {
-            return Promise.reject('elem cannot be null');
-        }
-
-        var url;
-        if (elem.tagName !== "IMG") {
-            url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, "");
-            elem.style.backgroundImage = 'none';
-        } else {
-            url = elem.getAttribute("src");
-            elem.setAttribute("src", "");
-        }
-
-        return Promise.resolve(url);
-    }
-
-    function loadImageIntoImg(elem, url) {
-        return new Promise(function (resolve, reject) {
-            dom.addEventListener(elem, 'load', resolve, {
-                once: true
-            });
-            elem.setAttribute("src", url);
-        });
-    }
-
-    return {
-        loadImage: loadImage,
-        unloadImage: unloadImage
-    };
-
-});

src/components/images/imageLoader.js

@@ -1,4 +1,4 @@
-define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', 'userSettings', 'require', 'css!./style'], function (lazyLoader, imageFetcher, layoutManager, browser, appSettings, userSettings, require) {
+define(['lazyLoader', 'userSettings', 'css!./style'], function (lazyLoader, userSettings) {
     'use strict';
 
     var self = {};
@@ -17,8 +17,17 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
         }
     }
 
-    function fillImageElement(elem, source) {
+    function fillImageElement(elem, url) {
-        imageFetcher.loadImage(elem, source).then(function () {
+        let preloaderImg = new Image();
+        preloaderImg.src = url;
+
+        preloaderImg.addEventListener('load', (event) => {
+            if (elem.tagName !== "IMG") {
+                elem.style.backgroundImage = "url('" + url + "')";
+            } else {
+                elem.setAttribute("src", url);
+            }
+
             if (userSettings.enableFastFadein()) {
                 elem.classList.add('lazy-image-fadein-fast');
             } else {
@@ -26,13 +35,28 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
             }
 
             elem.removeAttribute("data-src");
+            preloaderImg = null;
         });
     }
 
     function emptyImageElement(elem) {
-        imageFetcher.unloadImage(elem).then(function (url) {
+        var url;
+
+        if (elem.tagName !== "IMG") {
+            url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, "");
+            elem.style.backgroundImage = 'none';
+        } else {
+            url = elem.getAttribute("src");
+            elem.setAttribute("src", "");
+        }
+
         elem.setAttribute("data-src", url);
-        });
+
+        if (userSettings.enableFastFadein()) {
+            elem.classList.remove('lazy-image-fadein-fast');
+        } else {
+            elem.classList.remove('lazy-image-fadein');
+        }
     }
 
     function lazyChildren(elem) {

src/components/images/style.css

@@ -1,26 +1,15 @@
-.lazy-image-fadein {
+.cardImageContainer.lazy {
     opacity: 0;
-    animation: lazy-image-fadein 330ms ease-in normal both;
-    -webkit-animation-duration: 0.8s;
-    -moz-animation-duration: 0.8s;
-    -o-animation-duration: 0.8s;
-    animation-duration: 0.8s;
-    -webkit-animation-name: popInAnimation;
-    -moz-animation-name: popInAnimation;
-    -o-animation-name: popInAnimation;
-    animation-name: popInAnimation;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    -o-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-    -moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-    -o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
 }
 
-.lazy-image-fadein-fast {
+.cardImageContainer.lazy.lazy-image-fadein {
-    animation: lazy-image-fadein 160ms ease-in normal both;
+    opacity: 1;
+    transition: opacity 1s;
+}
+
+.cardImageContainer.lazy.lazy-image-fadein-fast {
+    opacity: 1;
+    transition: opacity 0.5s;
 }
 
 @keyframes lazy-image-fadein {
@@ -32,13 +21,3 @@
         opacity: 1;
     }
 }
-
-@keyframes popInAnimation {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}

src/scripts/site.js

@@ -392,10 +392,6 @@ var AppInfo = {};
             define("registerElement", ["document-register-element"], returnFirstDependency);
         }
 
-        define("imageFetcher", [componentsPath + "/images/imageFetcher"], returnFirstDependency);
-
-        var preferNativeAlerts = browser.tv;
-
         define("alert", [componentsPath + "/alert"], returnFirstDependency);
 
         defineResizeObserver();