离子2 /离子3 /离子4 :(懒)加载微调器的图片

Question

我在ionic2应用程序中使用ion-img来正确加载我的图片.但是,我想知道是否有办法向用户表明图片实际上正在加载.

谢谢您的帮助!

编辑:如果你绝对需要使用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

我终于用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 2

如果你想使用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默认值.

Answer 3

请使用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 {}