Angular 图片懒加载

Angular 图片懒加载有很多写好的ng library可以用，我这里用的是ng-lazyload-image。可以在npm官网直接搜索。

安装

npm install ng-lazyload-image --save

在module中导入：

import { CommonModule } from '@angular/common';
import { LazyLoadImageModule } from 'ng-lazyload-image';

@NgModule({
  imports: [
    CommonModule,
    LazyLoadImageModule,
    ...
    ],
    ...

在component中初始化默认图片和懒加载图片

export class MyActivityComponent implements OnInit, OnDestroy {

  constructor(
    private cService: ConstService
  ) {

  }

  // 懒加载默认图片url
  defaultImage = this.cService.getDefaultImage();
  // 
  cover = "https://hd.unsplash.com/photo-1431400445088-1750c997c6b5"

}

template中通过属性型指令使用：

...
<img [defaultImage]="defaultImage" [lazyLoad]="cover" />
...

更多用法，请参考官方示例

原文地址：https://blog.partager.top/2018/06/04/ng-lazyload-image/