lazy load images

src/app/home/home.module.ts

@@ -18,6 +18,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {TopPartnerLogoComponent} from './top-partner-logo/top-partner-logo.component';
 import {TopPartnerPanelComponent} from './top-partner-panel/top-partner-panel.component';
 import {PhotoPanelComponent} from './photo-panel/photo-panel.component';
+import { LazyDirective } from './lazy.directive';
 
 @NgModule({
   imports: [
@@ -40,7 +41,8 @@ import {PhotoPanelComponent} from './photo-panel/photo-panel.component';
     TicketsComponent,
     TopPartnerLogoComponent,
     TopPartnerPanelComponent,
-    PhotoPanelComponent
+    PhotoPanelComponent,
+    LazyDirective
   ],
   entryComponents: [
     TicketAdditionalInfoComponent,

src/app/home/lazy.directive.ts

@@ -0,0 +1,39 @@
+import { Directive, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[lazyLoad]'
+})
+export class LazyDirective implements AfterViewInit {
+
+  @Output() public lazyLoad: EventEmitter<any> = new EventEmitter();
+
+  private _intersectionObserver?: IntersectionObserver;
+
+  constructor(
+    private _element: ElementRef
+  ) { 
+  }
+
+  public ngAfterViewInit() {
+    this._intersectionObserver = new IntersectionObserver(entries => {
+      this.checkForIntersection(entries);
+    }, {});
+    this._intersectionObserver.observe((this._element.nativeElement) as Element);
+  }
+
+  private checkForIntersection = (entries: Array<IntersectionObserverEntry>) => {
+    entries.forEach((entry: IntersectionObserverEntry) => {
+      if (this.checkIfIntersecting(entry)) {
+        this.lazyLoad.emit();
+        this._intersectionObserver.unobserve((this._element.nativeElement) as Element);
+        this._intersectionObserver.disconnect();
+      }
+    });
+  }
+
+  private checkIfIntersecting(entry: IntersectionObserverEntry) {
+    return (entry as any).isIntersecting && entry.target === this._element.nativeElement;
+  }
+
+
+}

src/app/home/photo-panel/photo-panel.component.html

@@ -1,9 +1,9 @@
-<div class="panel-holder">
+<div class="panel-holder" (lazyLoad)="loadImages()">
   <div class="photos-holder">
     <div (click)="goToGallery()" class="more-photos-info">
       <h1>Click to see more photos</h1>
     </div>
-    <div class="mover">
+    <div class="mover" >
       <img *ngFor="let image of images; let i = index"
         [ngClass]="i == 0 ? 'first': 'second'"
         (load)="setVisibilityOfImage(i)"

src/app/home/photo-panel/photo-panel.component.ts

@@ -20,7 +20,7 @@ enum PhotoState {
     transition('* <=> *', animate(500))
   ])]
 })
-export class PhotoPanelComponent implements OnInit {
+export class PhotoPanelComponent{
 
   images: Observable<string>[];
   imagesColRef: Observable<Images[]>;
@@ -31,10 +31,6 @@ export class PhotoPanelComponent implements OnInit {
 
   }
 
-  ngOnInit() {
-    this.loadImages();
-  }
-
   loadImages() {
     this.imagesColRef = this.afStore
       .collection<Images>('images', ref => ref.where('name', '==', 'past-images').limit(1))