ng-lazyload-imageを使って、スクロールに応じた画像の遅延読み込みをしてみる。
今回はわかり易い例として、スクロールに応じてグリッド配置した画像を例にした。
レスポンシブのグリッドを作るために、AngularMaterialの grid-list も使っています。

デモ: AngularLazyloadGridimageDemo

ng-lazyload-imageの導入

まずは、Angularプロジェクトにインストール

$ npm install ng-lazyload-image --save

app.moduleにインポートしておく。
(別途モジュール分割している場合は、インポートする先が変わってくる)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // 追加
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LazyLoadImageModule // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

グリッド画像に遅延ローディングを設定する

テンプレート側では、<img> タグのlazyLoadディレクティブに画像URLを指定します。
src属性の代わりに、lazyLoadを使うだけなので、使い方はいたって簡単です。

app.component.html

<mat-grid-list cols="4" rowHeight="1:1">
  <mat-grid-tile *ngFor="let item of range(150)">
    <img lazyLoad="assets/images/nattouIMGL3800_TP_V.jpg">
  </mat-grid-tile>
</mat-grid-list>

また、lazyloadの文脈からは外れますが、サンプルの画像をリピートするためのメソッドは、次の記事を参考にAngular 2以降で動作するようにしています。
AngularJS tips - ng-repeat で配列ではなく数値で for ループする方法

app.component.ts

...
export class AppComponent {

  range(n): number[] {
    const arr = [];
    for (let i = 0; i < n; ++i) {
      arr.push(i);
    }
    return arr;
  }
}

ここまでの手順で、スクロールに応じて画像を遅延読込することが出来るのですが、「ふわっ」と徐々に画像を表示させるアニメーションを加えるためのCSSを追加します。
ng-lazyloaded というクラスは、ng-lazyload-imageによって画像が完全に読み込まれたタイミングで動的に付加されるクラスです。

app.component.css

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* lazyload */
  transition: opacity 1s;
  opacity: 0;
}

img.ng-lazyloaded {
  opacity: 1;
}