From a72698e1a9cf1eeaf6f3ee446d562cbb0c201b8c Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sat, 18 Dec 2021 14:35:25 +0100
Subject: [PATCH] Transition of lazy loaded image

---
 .../components/umbimagelazyload.directive.js     | 16 ++++++++++------
 src/Umbraco.Web.UI.Client/src/less/main.less     | 14 ++++++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js
index 988f8fab24..81c2cf2533 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js
@@ -36,19 +36,23 @@ Use this directive to lazy-load an image only when it is scrolled into view.
 
     function ImageLazyLoadDirective() {
 
-        const placeholder = "assets/img/transparent.png";
+      const placeholder = "assets/img/transparent.png";
 
-        function link(scope, element, attrs) {
+      function link(scope, element, attrs) {
 
             const observer = new IntersectionObserver(loadImg);
             const img = element[0];
             img.src = placeholder;
+            img.classList.add("lazy");
             observer.observe(img);
 
-            function loadImg(changes) {
-                changes.forEach(change => {
-                    if (change.intersectionRatio > 0 && change.target.src.indexOf(placeholder) > 0) {
-                        change.target.src = attrs.umbImageLazyLoad;
+            function loadImg(entries) {
+                entries.forEach(entry => {
+                  if (entry.intersectionRatio > 0 && entry.target.src.indexOf(placeholder) > 0) {
+                      let lazyImage = entry.target;
+                      lazyImage.src = attrs.umbImageLazyLoad;
+                      lazyImage.classList.add("loaded");
+                      observer.unobserve(lazyImage);
                     }
                 });
             }
diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less
index 43911fccb1..d46a1751b2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/main.less
+++ b/src/Umbraco.Web.UI.Client/src/less/main.less
@@ -14,6 +14,20 @@
 	box-shadow: 3px 0px 7px rgba(0,0,0,0.16);
 }
 
+img:not([src]):not([srcset]) {
+  visibility: hidden;
+}
+
+img.lazy {
+  -webkit-transition: opacity 1.2s cubic-bezier(0.16, 1.08, 0.38, 0.98);
+  transition: opacity 1.2s cubic-bezier(0.16, 1.08, 0.38, 0.98);
+  opacity: 0;
+}
+
+img.lazy.loaded {
+  opacity: 1;
+}
+
 .umb-scrollable, .umb-auto-overflow {
 	overflow: auto;
 }