FIX: Prevent layout changes while images are lazy-loading

FIX: Prevent layout changes while images are lazy-loading

This commit moves the temporary image to be adjacent to the original image in the DOM. Previously the temporary image was appended to the parent element. Normally this makes no difference because the temporary element has position:absolute. However, if the :last-child selector is being used on the parent, it can cause layout changes during 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 8e0a256..58c2298 100644
--- a/app/assets/javascripts/discourse/lib/lazy-load-images.js.es6
+++ b/app/assets/javascripts/discourse/lib/lazy-load-images.js.es6
@@ -54,7 +54,7 @@ function show(image) {
     copyImg.style.height = imageData.height;
     copyImg.className = imageData.className;
 
-    image.parentNode.appendChild(copyImg);
+    image.parentNode.insertBefore(copyImg, image);
   } else {
     image.classList.remove("d-lazyload-hidden");
   }

GitHub sha: b69e57e2

1 Like