UX: Remove background image after image has loaded (#13642)

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.

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 c354d1f..a0a2bc0 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;`;
+          }
         }
       }),
     {

GitHub sha: cf63931b9ec485fda9a9b1f2d36a31daee566029

This commit appears in #13642 which was approved by CvX and pmusaraj. It was merged by jbrw.