Ionic 2/Ionic 3/Ionic 4: (Lazy) Loading Spinner für Bilder

Question

Ich benutze ion-img in meiner ionic2-Anwendung, um meine Bilder korrekt zu laden. Ich frage mich jedoch, ob es eine Möglichkeit gibt, dem Benutzer anzuzeigen, dass das Bild tatsächlich geladen wird.

Vielen Dank für Ihre Hilfe!

EDIT: Hier ist die Antwort, wenn Sie unbedingt das Ion-Img-Tag verwenden müssen. Wenn nicht, sollten Sie ionic-image-loader als AdminDev826 vorgeschlagen verwenden.

Ich habe dieses Problem endlich mit CSS gelöst! Wenn ein Bild in ionic 2 geladen wird, hat das ion-img-Tag keine Klasse. Wenn das Bild schließlich geladen wird, erhält das ionen-img-Tag die Klasse "img-loaded".

Hier ist meine Lösung:

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

Und mein CSS:

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

ich hoffe mir kann jemand helfen!

Answer 1

Bitte verwenden Ionen Bild-loader-Plugin

1. Installieren Sie das NPM-Paket

   npm install --save ionic-image-loader 
   

2. installieren Erforderliche Plugins

   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. Import IonicImageLoader Modul

   hinzufügen IonicImageLoader.forRoot() in der App-Root-Modul

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

   Dann IonicImageLoader in Ihrem Kind/Shared-Modul (e)

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

Answer 2

Ich habe dieses Problem endlich mit CSS gelöst! Wenn ein Bild in ionic 2 geladen wird, hat das ion-img-Tag keine Klasse. Wenn das Bild schließlich geladen wird, erhält das ionen-img-Tag die Klasse "img-loaded".

Hier ist meine Lösung:

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

Und mein CSS:

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

ich hoffe mir kann jemand helfen!

Answer 3

Ihre Lösung ist nicht die beste, weil die App immer noch alle Bilder herunterlädt, zum Beispiel in einer Facebook Like App, Sie werden alle Bilder aus dem Feed in Ihre App herunterladen, das macht alles super langsam.

verwenden: https://github.com/NathanWalker/ng2-image-lazy-load

Answer 4

Wenn Sie das img-Tag statt ion-img hier ist die Lösung verwenden möchten:

<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> 

In Ihrem CSS-Datei Sie folgendes schreiben sollte:

.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 ist eine boolesche Variable, die Sie in Ihrer Komponente definieren müssen.