yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transition of lazy loaded image

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2021-12-18 14:35:25 +01:00
committed by Nathan Woulfe
parent c905fdd9b5
commit a72698e1a9
2 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/Umbraco.Web.UI.Client/src/common/directives/components/umbimagelazyload.directive.js
View File

@@ -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);
}
});
}

14
src/Umbraco.Web.UI.Client/src/less/main.less
View File

@@ -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;
}