FIX: Apply classes when lazily loading images

FIX: Apply classes when lazily loading images

If an image had extra classes (for example oneboxes), then while loading the copy of the image would lose those classes and look differently until the image had loaded fully.

This fix copies the classes while loading.

diff --git a/app/assets/javascripts/discourse/lib/lazy-load-images.js.es6 b/app/assets/javascripts/discourse/lib/lazy-load-images.js.es6
index b291fcd..8e0a256 100644
--- a/app/assets/javascripts/discourse/lib/lazy-load-images.js.es6
+++ b/app/assets/javascripts/discourse/lib/lazy-load-images.js.es6
@@ -19,7 +19,8 @@ function hide(image) {
     src: image.src,
     srcset: image.srcset,
     width: image.width,
-    height: image.height
+    height: image.height,
+    className: image.className
   });
   image.removeAttribute("srcset");
 
@@ -51,6 +52,7 @@ function show(image) {
     copyImg.style.left = `${image.offsetLeft}px`;
     copyImg.style.width = imageData.width;
     copyImg.style.height = imageData.height;
+    copyImg.className = imageData.className;
 
     image.parentNode.appendChild(copyImg);
   } else {

GitHub sha: 312e282b

1 Like