Ionic 2/Ionic 3/Ionic 4: (Lazy) Загрузочный счетчик для изображений

Question

Я использую ион-img в приложении ionic2 для правильной загрузки изображений. Однако, интересно, есть ли способ указать пользователю, что изображение действительно загружается.

Благодарим за помощь!

EDIT: Вот ответ, если вам абсолютно необходимо использовать тег ion-img. Если нет, вы должны использовать ionic-image-loader, как предлагалось AdminDev826.

Я, наконец, решил эту проблему с помощью CSS! Когда изображение загружается в ионном 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

Пожалуйста, используйте ионно-образ-загрузчик плагин

1. Установите НПМ пакет

   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 2

Я, наконец, решил эту проблему с помощью CSS! Когда изображение загружается в ионном 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 3

Ваше решение не самое лучшее, потому что приложение по-прежнему загружает все изображения. Например, в приложении, посвященном Facebook, вы будете загружать все изображения из Корзины в свое приложение, это сделает все очень медленным.

Используйте это: https://github.com/NathanWalker/ng2-image-lazy-load

Answer 4

Если вы хотите использовать 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 - это логическая переменная, которую вы должны определить в своем компоненте.