Ionic3 UI組件之 ImageLoader

ImageLoader：通過后台線程加載圖片（異步）並緩存。類似於Glide或者Picasso。

組件特性：

• 后台線程下載圖片，下載速度更快，不使用webview的資源；
• 緩存圖像。圖像將在您下次顯示時立即顯示，因為它們已保存在本地存儲區，而不是每次都去服務器請求；
• 可顯示加載進度條，也可關閉；
• 可設置最大緩存大小並自動刪除舊圖像；
• 服務器圖像不存在時允許設置一個默認圖像；

參考地址：https://github.com/zyra/ionic-image-loader

==========================================================

1）安裝包：npm install --save ionic-image-loader

2）安裝包和插件：npm i --save @ionic-native/file

ionic cordova plugin add cordova-plugin-file

npm i --save @ionic-native/transfer

ionic cordova plugin add cordova-plugin-file-transfer

3）在app.module.ts文件中添加：import { IonicImageLoader } from 'ionic-image-loader';

添加：IonicImageLoader.forRoot()；

4）Then add IonicImageLoader in your child/shared module(s)？？？

5）使用組件：<img-loader src="https://path.to/my/image.jpg"></img-loader>

<img-loader src="https://path.to/my/image.jpg" useImg></img-loader>

 

第一次加載需要網絡，加載成功后圖片被緩存，斷網后仍然可以加載圖片。