离子2 /离子3 /离子4：（懒惰）载重旋转器的图片

Question

我使用离子-IMG在我的申请ionic2正确加载我的图片。但是，我想知道是否有方法向用户指示图片实际上正在加载。

谢谢你的帮助！

编辑：这里是答案，如果你绝对需要使用离子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包

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

   然后你的孩子/共享模块（S）

   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是你在你的组件来定义一个布尔变量。