From 54496f2bf905da1ae10cf6f44ef4754b03279fc2 Mon Sep 17 00:00:00 2001
From: Jan Rydzewski <flegmer@gmail.com>
Date: Wed, 27 Nov 2019 10:49:50 +0100
Subject: [PATCH] Smooth loading of fullsize images

---
 ee_site/static/src/js/dynamic_fill_image.js | 31 +++++++++++++++++++--
 ee_site/static/src/scss/main.scss           |  4 +++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/ee_site/static/src/js/dynamic_fill_image.js b/ee_site/static/src/js/dynamic_fill_image.js
index 93d725bd..c4c4b5d1 100644
--- a/ee_site/static/src/js/dynamic_fill_image.js
+++ b/ee_site/static/src/js/dynamic_fill_image.js
@@ -20,12 +20,39 @@ const roundSize = (size) => {
  **/
 const assignDynamicSrc = (image) => {
     if (!image.dataset.imageId) return;
+
+    // compute proper size image url
     const width = roundSize(image.clientWidth);
     const height = roundSize(image.clientHeight);
     const newSrc = `${domainWithProtocol}/rendition/${image.dataset.imageId}/${width}/${height}/`;
-    if (newSrc != image.src) {
-        image.src = newSrc;
+    if (newSrc == image.src) return;
+
+    // create clone to cover image during src change
+    const clonedImage = image.cloneNode();
+    clonedImage.classList.remove('dynamic');
+    clonedImage.style.transition = "opacity 0.3s";
+    if (image.nextSibling) {
+        image.parentNode.insertBefore(clonedImage, image.nextSibling);
+    } else {
+        image.parentNode.appendChild(clonedImage);
     }
+
+    // hide original image
+    image.style.opacity = 0;
+
+    // load proper size image into original img tag
+    const onloaded = () => {
+        // show image
+        image.style.opacity = clonedImage.style.opacity;
+
+        // delete cover image
+        clonedImage.style.opacity = 0;
+        setTimeout(() => clonedImage.remove(), 1000);
+
+        image.removeEventListener('load', onloaded);
+    };
+    image.addEventListener('load', onloaded);
+    image.src = newSrc;
 };
 
 /**
diff --git a/ee_site/static/src/scss/main.scss b/ee_site/static/src/scss/main.scss
index 30b0ae2b..bfc1f8f4 100644
--- a/ee_site/static/src/scss/main.scss
+++ b/ee_site/static/src/scss/main.scss
@@ -60,3 +60,7 @@
     width: 100%;
     z-index: -1;
 }
+
+img.dynamic {
+    transition: opacity 0.3s;
+}