diff --git a/src/components/images/imageFetcher.js b/src/components/images/imageFetcher.js deleted file mode 100644 index c7deadc1bd..0000000000 --- a/src/components/images/imageFetcher.js +++ /dev/null @@ -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 - }; - -}); diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js index 37b9226f6a..4d6a45d2d4 100644 --- a/src/components/images/imageLoader.js +++ b/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) { - imageFetcher.loadImage(elem, source).then(function () { + function fillImageElement(elem, url) { + 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) { - elem.setAttribute("data-src", 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) { diff --git a/src/components/images/style.css b/src/components/images/style.css index 2836dd0159..ef60f8b837 100644 --- a/src/components/images/style.css +++ b/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 { - animation: lazy-image-fadein 160ms ease-in normal both; +.cardImageContainer.lazy.lazy-image-fadein { + 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; - } -} diff --git a/src/scripts/site.js b/src/scripts/site.js index 8957481242..df1c0f33d1 100644 --- a/src/scripts/site.js +++ b/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();