Frontend_V2: Add lazy loading for images(Cloud-CV#3571)

* add lazy load for images * add new line Co-authored-by: Rishabh Jain <[email protected]>
vinceli1004 · Sep 16, 2021 · 59b961f · 59b961f
1 parent 94f74f9
commit 59b961f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/frontend_v2/src/app/Directives/image.lazyload.ts b/frontend_v2/src/app/Directives/image.lazyload.ts
@@ -0,0 +1,31 @@
+import { AfterViewInit, Directive, ElementRef, HostBinding, Input } from '@angular/core';
+
+@Directive({
+  selector: 'img[appLazyLoadImage]'
+})
+
+export class LazyImageDirective implements AfterViewInit {
+
+  @HostBinding('attr.src') srcAttribute = null;
+
+  @Input() src: string;
+
+  constructor(private el: ElementRef) {}
+
+  ngAfterViewInit() {
+    if(window && 'IntersectionObserver' in window) {
+      const obs = new IntersectionObserver(entries => {
+        entries.forEach(({ isIntersecting }) => {
+          if (isIntersecting) {
+            this.srcAttribute = this.src;
+            obs.unobserve(this.el.nativeElement);
+          }
+        });
+      });
+      obs.observe(this.el.nativeElement);
+    }
+    else {
+      this.srcAttribute = this.src;
+    }
+  }
+}
diff --git a/...2/src/app/components/publiclists/challengelist/challengecard/challengecard.component.html b/...2/src/app/components/publiclists/challengelist/challengecard/challengecard.component.html
@@ -1,6 +1,6 @@
 <div class="card ev-challenge-card hoverable z-depth-2 margin-bottom-cancel">
   <div class="card-image ev-card-image">
-    <img class="bg-img" [src]="challenge['image']" />
+    <img class="bg-img" [src]="challenge['image']" appLazyLoadImage/>
   </div>
   <div class="card-content">
     <p class="fs-20 fw-regular truncate">{{ challenge['title'] }}</p>

diff --git a/frontend_v2/src/app/shared/shared.module.ts b/frontend_v2/src/app/shared/shared.module.ts
@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 // import directive
 import { PasswordMismatchValidatorDirective } from '../Directives/password.validator';
 import { EmailValidatorDirective } from '../Directives/email.validator';
+import { LazyImageDirective } from '../Directives/image.lazyload';
 
 // import component
 import { HeaderStaticComponent } from '../components/nav/header-static/header-static.component';
@@ -19,6 +20,7 @@ import { UtilityModule } from '../components/utility/utility.module';
   declarations: [
     PasswordMismatchValidatorDirective,
     EmailValidatorDirective,
+    LazyImageDirective,
     HeaderStaticComponent,
     FooterComponent,
     NotFoundComponent,
@@ -27,6 +29,7 @@ import { UtilityModule } from '../components/utility/utility.module';
   exports: [
     PasswordMismatchValidatorDirective,
     EmailValidatorDirective,
+    LazyImageDirective,
     CommonModule,
     RouterModule,
     FormsModule,