web-dev-qa-db-ja.com

Ionic 2 / Ionic 3 / Ionic 4：（Lazy）Loading spinner for pictures

写真を正しく読み込むために、ionic2アプリケーションでion-imgを使用しています。ただし、画像が実際に読み込まれていることをユーザーに示す方法はあるのでしょうか。

ご協力ありがとうございました！

EDIT：これは、どうしてもion-imgタグを使用する必要がある場合の答えです。そうでない場合は、 ionic-image-loader を AdminDev826 として使用する必要があります

私はついにCSSでその問題を解決しました！ ionic 2で画像が読み込まれる場合、ion-imgタグにはクラスがありません。ただし、画像が最終的に読み込まれると、ion-imgタグはクラス「img-読み込まれました。

これが私の解決策です：

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

そして私のCSS：

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

誰かのお役に立てれば幸いです。

mobileangulartypescriptsassionic2
12
Guillaume Le Mière

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 {}
10
AdminDev826

私はついにCSSでその問題を解決しました！ ionic 2で画像が読み込まれる場合、ion-imgタグにはクラスがありません。ただし、画像が最終的に読み込まれると、ion-imgタグはクラス「img-読み込まれました。

これが私の解決策です：

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

そして私のCSS：

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

誰かのお役に立てれば幸いです。

13
Guillaume Le Mière

ion-imgの代わりに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は、コンポーネントで定義する必要があるfalseのデフォルト値を持つブール変数です。

9
M Fouad Kajj

アプリはまだすべての画像をダウンロードするため、ソリューションは最適ではありません。たとえば、Facebookのようなアプリでは、フィードからアプリにすべての画像をダウンロードします。これにより、すべてが非常に遅くなります。

これを使用してください： https://github.com/NathanWalker/ng2-image-lazy-load

3
Yossi Neiman