Images lazy loading

src/app/app.module.ts

@@ -8,12 +8,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { LightboxModule } from 'ngx-lightbox';
 
 import { AppRoutingModule } from './app-routing.module';
+// directives
+import { LazyImgDirective } from './directives/lazy-img.directive';
 // components
 import { AppComponent } from './app.component';
 import { TweetsCalendarComponent } from './tweets/tweets-calendar.component';
 import { MomentsListComponent } from './moments/moments-list.component';
 import { MessagesListComponent } from './messages/messages-list.component';
-// pipe
+// pipes
 import { NgForObjectPipe } from './pipes/ngfor-object';
 import { MouthPipe } from './pipes/mouth';
 import { SafePipe } from './pipes/safe';
@@ -51,6 +53,9 @@ const appRoutes: Routes = [
 
 @NgModule({
   declarations: [
+    // directive
+    LazyImgDirective,
+
     // components
     AppComponent,
     TweetsCalendarComponent,

src/app/directives/lazy-img.directive.ts

+import { Directive, Input, ElementRef, ChangeDetectorRef, HostListener, HostBinding } from '@angular/core';
+
+/**
+ * lazy loading for images
+ */
+@Directive({ selector: '[lazy-img]' })
+export class LazyImgDirective {
+
+    @Input('lazy-src') lazyImg: string;
+
+    private element: HTMLElement;
+
+    private visible = false;
+
+    constructor(
+        private elementRef: ElementRef,
+        private cdr: ChangeDetectorRef
+    ) {
+        this.element = elementRef.nativeElement;
+        setTimeout(() => {
+            this.onScroll();
+        });
+    }
+
+    @HostListener('window:scroll')
+    onScroll() {
+        if (!this.visible) {
+            const pageTop = window.scrollY - 300;
+            const pageBottom = pageTop + window.innerHeight + 300;
+            const elementTop = this.element.offsetTop;
+            const elementBottom = elementTop + this.element.offsetHeight;
+
+            if (elementTop <= pageBottom && elementBottom >= pageTop) {
+                this.visible = true;
+                if (this.element.tagName === 'IMG') {
+                    (this.element as HTMLInputElement).src = this.lazyImg;
+                }
+            }
+        }
+    }
+}

src/app/moments/moments-list.component.html

@@ -45,7 +45,8 @@
         <div class="tweet-media"
              *ngIf="testImage(tweet.tweet.media)">
             <img *ngFor="let media of tweet.tweet.media"
-                 [src]="imageUrl(tweet.tweet, media)"
+                 lazy-img
+                 [lazy-src]="imageUrl(tweet.tweet, media)"
                  [alt]="media.mediaId"
                  (click)="openImage(media)">
         </div>

src/app/tweets/tweets-calendar.component.html

@@ -57,7 +57,8 @@
       <div class="tweet-media"
            *ngIf="testImage(tweet.entities.media)">
         <img *ngFor="let media of tweet.entities.media"
-             [src]="imageUrl(tweet, media)"
+             lazy-img
+             [lazy-src]="imageUrl(tweet, media)"
              [alt]="media.id"
              (click)="openImage(media)">
       </div>

tslint.json

@@ -121,11 +121,11 @@
     "no-inputs-metadata-property": true,
     "no-outputs-metadata-property": true,
     "no-host-metadata-property": true,
-    "no-input-rename": true,
+    "no-input-rename": false,
     "no-output-rename": true,
     "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true
   }
-}
+}
\ No newline at end of file