FIX: image rendered temporarily in wrong position while loading

FIX: image rendered temporarily in wrong position while loading

Previously non lightboxed images would render in the wrong spot while loading.

We assumed the image we were rendering while loading was at 0,0 position.
This is not the case on non-lightboxed images cause they have no surrounding
DIV.

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 c159fe6..b291fcd 100644
--- a/app/assets/javascripts/discourse/lib/lazy-load-images.js.es6
+++ b/app/assets/javascripts/discourse/lib/lazy-load-images.js.es6
@@ -47,8 +47,8 @@ function show(image) {
     copyImg.srcset = imageData.srcset || copyImg.srcset;
 
     copyImg.style.position = "absolute";
-    copyImg.style.top = 0;
-    copyImg.style.left = 0;
+    copyImg.style.top = `${image.offsetTop}px`;
+    copyImg.style.left = `${image.offsetLeft}px`;
     copyImg.style.width = imageData.width;
     copyImg.style.height = imageData.height;

GitHub
sha: d0f38dbb

3 Likes