2016-08-09 110 views
9

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.Ionic 2/Ionic 3/Ionic 4: (Lazy) Loading Spinner für Bilder

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!

Antwort

8

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 {} 
    
+0

Bitte überprüfen Sie diesen Link für weitere Details – AdminDev826

+0

https://www.npmjs.com/package/ionic-image-loader – AdminDev826

+0

Ich benutze es tatsächlich ;-) Danke für diese neue Antwort! –

13

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!

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

+1

Es hängt davon ab, wie Sie diesen Code verwenden. Verwenden Sie in einer Facebook-App einfach Folgendes: https://ionicframework.com/docs/v2/api/components/infinite-scroll/InfiniteScroll/ –

+0

@Yossi Neiman Haben Sie ein Beispiel, wie ich ng2-image- verwenden kann? lazy-load in der ionic2 App? –

6

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.

+0

Vielen Dank für diese andere Antwort! ;-) –

+0

Willkommen, ich hoffe, dass Sie nützlich finden :) –