Ionic 2 / Ionic 3 / Ionic 4 : (Lazy) 加載圖片微調器

Question

我在 ionic2 應用程序中使用 ion-img 來正確加載我的圖片。 但是，我想知道是否有一種方法可以向用戶表明圖片實際上正在加載。

感謝您的幫助！

編輯：如果您絕對需要使用 ion-img 標簽，這里是答案。 如果沒有，您應該按照AdminDev826 的建議使用ionic-image-loader 。

我終於用 CSS 解決了這個問題！ 當圖像在 ionic 2 中加載時， ion-img 標簽沒有任何類。 但是，當最終加載圖像時， ion-img 標簽獲得類“img-loaded”。

這是我的解決方案：

  <ion-img [src]="img.src"></ion-img>
  <ion-spinner></ion-spinner>

還有我的 CSS ：

.img-loaded + ion-spinner {
  display:none;
}

我希望它可以幫助某人！

Answer 1

我終於用 CSS 解決了這個問題！ 當圖像在 ionic 2 中加載時， ion-img 標簽沒有任何類。 但是，當最終加載圖像時， ion-img 標簽獲得類“img-loaded”。

這是我的解決方案：

  <ion-img [src]="img.src"></ion-img>
  <ion-spinner></ion-spinner>

還有我的 CSS ：

.img-loaded + ion-spinner {
  display:none;
}

我希望它可以幫助某人！

Answer 2

如果你想使用img標簽而不是ion-img這里是解決方案：

  <img src="{{image.src}}" (load)="loaded = true" [ngClass]="{'img-loaded':loaded}" [hidden]="!loaded" *ngIf="image_exists" />
  <ion-spinner [ngClass]="{'center':true}" *ngIf="!loaded"></ion-spinner>

在您的 CSS 文件中，您應該編寫以下內容：

 .img-loaded + ion-spinner {
  display:none;
}
// .center in my case to make the spinner at the center
.center{
  margin-left: auto;
  margin-right: auto;
  display: block;
}

loaded是一個布爾變量，您必須在組件中定義錯誤的默認值。

Answer 3

請使用 ionic-image-loader 插件

1. 安裝 NPM 包

   npm install --save ionic-image-loader

2. 安裝所需的插件

   npm i --save @ionic-native/file ionic plugin add cordova-plugin-file --save npm i --save @ionic-native/transfer ionic plugin add cordova-plugin-file-transfer --save

3. 導入 IonicImageLoader 模塊

   在應用的根模塊中添加 IonicImageLoader.forRoot()

    import { IonicImageLoader } from 'ionic-image-loader'; // import the module @NgModule({ ... imports: [ IonicImageLoader.forRoot() ] }) export class AppModule {}

   然后在您的子/共享模塊中添加 IonicImageLoader

    import { IonicImageLoader } from 'ionic-image-loader'; @NgModule({ ... imports: [ IonicImageLoader ] }) export class SharedModule {}

Answer 4

您的解決方案不是最好的，因為該應用程序仍會下載所有圖像，例如在 Facebook 之類的應用程序中，您將從 Feed 中下載所有圖像到您的應用程序，這將使一切變得非常慢。

使用這個： https : //github.com/NathanWalker/ng2-image-lazy-load

Answer 5

ionic-image-loader 不適用於 ionic4+。 您必須創建一個組件：

HTML

<ion-spinner name="dots" [hidden]="viewImage" color="primary"></ion-spinner>
<ion-img #image alt=""(ionImgDidLoad)="loadImage()" (ionError)="errorLoad()"></ion-img>

打字稿

    @Component({
      selector: 'preloader-img',
      templateUrl: './preloader-img.component.html',
      styles: [`
        ion-spinner {
          display: block;
          margin: auto;
        }
      `],
    })
    export class PreloaderImgComponent implements AfterViewInit {
      viewImage = false;

      @Input() url: string;
      @ViewChild('image', { static: false }) imageRef: IonImg;


      ngAfterViewInit() {
        this.imageRef.src = this.url;
      }
      loadImage() {
        this.viewImage = true;
      }
      errorLoad() {
        this.imageRef.src = '<your_default_img>';
      }
    }