diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js index 1811b117e1..53759b77cc 100644 --- a/src/components/images/imageLoader.js +++ b/src/components/images/imageLoader.js @@ -87,9 +87,6 @@ import './style.css'; requestAnimationFrame(() => { if (elem.tagName !== 'IMG') { elem.style.backgroundImage = "url('" + url + "')"; - if (elem.classList.contains('blurhashed')) { - elem.style.backgroundColor = '#fff'; - } } else { elem.setAttribute('src', url); } @@ -101,6 +98,12 @@ import './style.css'; } else { 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') { url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, ''); elem.style.backgroundImage = 'none'; - elem.style.backgroundColor = null; } else { url = elem.getAttribute('src'); elem.setAttribute('src', ''); @@ -120,6 +122,16 @@ import './style.css'; elem.classList.remove('lazy-image-fadein-fast', 'lazy-image-fadein'); 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) {