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

fix(card): white flashing images

This commit is contained in:
Fernando Fernández 2021-01-05 11:01:06 +01:00
parent f9333b7848
commit a91d4b6a67

View file

@ -87,9 +87,6 @@ import './style.css';
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (elem.tagName !== 'IMG') { if (elem.tagName !== 'IMG') {
elem.style.backgroundImage = "url('" + url + "')"; elem.style.backgroundImage = "url('" + url + "')";
if (elem.classList.contains('blurhashed')) {
elem.style.backgroundColor = '#fff';
}
} else { } else {
elem.setAttribute('src', url); elem.setAttribute('src', url);
} }
@ -101,6 +98,12 @@ import './style.css';
} else { } else {
elem.classList.add('lazy-image-fadein'); elem.classList.add('lazy-image-fadein');
} }
const canvas = elem.previousSibling;
if (elem.classList.contains('blurhashed') && canvas && canvas.tagName === 'CANVAS') {
canvas.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
canvas.classList.add('lazy-hidden');
}
}); });
}); });
} }
@ -111,7 +114,6 @@ import './style.css';
if (elem.tagName !== 'IMG') { if (elem.tagName !== 'IMG') {
url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, ''); url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, '');
elem.style.backgroundImage = 'none'; elem.style.backgroundImage = 'none';
elem.style.backgroundColor = null;
} else { } else {
url = elem.getAttribute('src'); url = elem.getAttribute('src');
elem.setAttribute('src', ''); elem.setAttribute('src', '');
@ -120,6 +122,16 @@ import './style.css';
elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein'); elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein');
elem.classList.add('lazy-hidden'); elem.classList.add('lazy-hidden');
const canvas = elem.previousSibling;
if (canvas && canvas.tagName === 'CANVAS') {
canvas.classList.remove('lazy-hidden');
if (userSettings.enableFastFadein()) {
canvas.classList.add('lazy-image-fadein-fast');
} else {
canvas.classList.add('lazy-image-fadein');
}
}
} }
export function lazyChildren(elem) { export function lazyChildren(elem) {