Ionic 2 / Ionic 3 / Ionic 4: (ленивый) загрузка spinner для фотографий

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

Спасибо за вашу помощь!

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

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

Я надеюсь, что это может помочь кому-то!

10
angular ionic2 mobile sass typescript

4 ответов

пожалуйста, используйте плагин 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 {}
9

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

Я надеюсь, что это может помочь кому-то!

13

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

7

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

использовать этот: https://github.com/NathanWalker/ng2-image-lazy-load

3