在使用ionic3的過程中，我們可以使用angularjs的組件特性進(jìn)行組件的自定義開發(fā)，對一些特定條件下的需求開發(fā)對應(yīng)的組件。

下面我們就通過自定義組件來實(shí)現(xiàn)圖片的懶加載效果。當(dāng)我們需要加載的圖片很大，但是我們又不愿意做壓縮讓圖片失真，所以我們需要使用圖片的懶加載效果。

實(shí)現(xiàn)流程

首先新建一個(gè)img-lazy-load組件：

ionic g component img-lazy-load

會在src目錄下生成一個(gè)components文件夾，里面包含img-lazy-load這個(gè)組件。
結(jié)構(gòu)如下：

這里寫圖片描述

然后主要修改兩個(gè)地方，一個(gè)是img-lazy-load.ts文件，一個(gè)是img-lazy-load.html文件

修改后的img-lazy-load.ts文件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'img-lazy-load',
  templateUrl: 'img-lazy-load.html'
})
export class ImgLazyLoad {

  default: string = 'assets/images/default.png';

  constructor() {

  }

  @Input() src: string //要顯示的圖片

  ngOnInit() {
    let img = new Image();
    img.src = this.src;
    img.onload = () => {
      //這里為了達(dá)到演示效果給了兩秒的延遲，實(shí)際使用中不需要延遲
      setTimeout(() => {
        this.default = this.src;
      }, 2000)
    }
  }
}

修改后的img-lazy-load.html文件

![]({{default}})

最后在使用的頁面引入該組件即可使用。比如我們在home這個(gè)頁面使用該組件，
那么我們首先在home.module.ts文件中引入組件

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    ImgLazyLoadModule//引入該組件
  ],
  exports: [
    HomePage
  ]
})

然后在home.html即可使用

<img-lazy-load [src]="imgUrl"></img-lazy-load>

這里需要注意，如果我們在ts文件中綁定imgUrl的話就按照上面那樣綁定值，如果imgUrl是通過ngFor綁定的值，就不需要加{{}}，如果imgUrl修改為定值的話，比如<img-lazy-load [src]="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=333f3ac494510fb367197097e932c893/a8014c086e061d95df89434571f40ad163d9ca84.jpg"></img-lazy-load>這樣寫會拋出異常，解決方案就是將“url地址”改為“'url地址'”*