Ionic 3 Image lazy loader

Question

I am developing ionic application which uses external image files. These images are loading in elements such as ion-card,ion-item,ion-slides. I need a spinner or some kind of technique to show until the image successfully.

I tried image caching plugins but it wasn't success.

Looking forward a better solution.

Thank you.

Answer 1

Define a loading picture in your js e.g.

loadingAnimation = "../../assets/img/loadingAnimation.gif";

Then use the || operator when setting the source in html:

<img [src]='{{ (yourActualPicture) || (loadingAnimation ) }}'/>

This way the loading animation will be shown until the actual picture has been downloaded.

On a side-note: You might want to have a look at Ionic's Spinner component https://ionicframework.com/docs/api/components/spinner/Spinner/