From cf63931b9ec485fda9a9b1f2d36a31daee566029 Mon Sep 17 00:00:00 2001 From: jbrw Date: Mon, 5 Jul 2021 19:15:29 -0400 Subject: [PATCH] UX: Remove background image after image has loaded (#13642) * UX: Remove background image after image has loaded If an image has a `smallUpload`, that may be set as the `background-image` on the `img` element, and the `img` element set to use `lazy` loading. When the browser decides to load the `src` of the image element, it is rendered on top of the existing background image. However, if the image proper has a transparent background, the background image may be partially visible through the transparent portions of the image. This change creates an `onload` event that removes the background image when the image proper has completed loading. --- .../javascripts/discourse/app/lib/lazy-load-images.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js index c354d1f2454..a0a2bc0fdc6 100644 --- a/app/assets/javascripts/discourse/app/lib/lazy-load-images.js +++ b/app/assets/javascripts/discourse/app/lib/lazy-load-images.js @@ -15,7 +15,15 @@ export function nativeLazyLoading(api) { forEachImage(post, (img) => { img.loading = "lazy"; if (img.dataset.smallUpload) { - img.style = `background-image: url(${img.dataset.smallUpload}); background-size: cover;`; + if (!img.complete) { + if (!img.onload) { + img.onload = () => { + img.removeAttribute("style"); + }; + } + + img.style = `background-image: url(${img.dataset.smallUpload}); background-size: cover;`; + } } }), {