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

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