mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Refactor the lazy loader for images

Browse source
This commit is contained in:
MrTimscampi 2020-04-12 03:49:42 +02:00
parent 1778404354
commit fc6a11bb4b
4 changed files with 39 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/components/images/imageFetcher.js
View file

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

36
src/components/images/imageLoader.js
View file

@ -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) {

39
src/components/images/style.css
View file

@ -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;
}
}

4
src/scripts/site.js
View file

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