在使用ionic3的過程中，我們可以使用angularjs的組件特性進行組件的自定義開發，對一些特定條件下的需求開發對應的組件。
下面我們就通過自定義組件來實現圖片的懶加載效果。當我們需要加載的圖片很大，但是我們又不愿意做壓縮讓圖片失真，所以我們需要使用圖片的懶加載效果。
實現流程
首先新建一個img-lazy-load組件：
ionic g component img-lazy-load
會在src目錄下生成一個components文件夾，里面包含img-lazy-load這個組件。
結構如下：
這里寫圖片描述
然后主要修改兩個地方，一個是img-lazy-load.ts文件，一個是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 = () => {
//這里為了達到演示效果給了兩秒的延遲，實際使用中不需要延遲
setTimeout(() => {
this.default = this.src;
}, 2000)
}
}
}
修改后的img-lazy-load.html文件
最后在使用的頁面引入該組件即可使用。比如我們在home這個頁面使用該組件，
那么我們首先在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地址'”*
