typescript Ionic 2 / Ionic 3 / Ionic 4 : (Lazy) 加载图片的微调器

Ionic 2 / Ionic 3 / Ionic 4 : (Lazy) Loading spinner for pictures

提问by Guillaume Le Mière

I'm using ion-img in my ionic2 application to load my pictures correctly. However, I wonder if there is a way to indicate to the user that the picture is actually loading.

我在我的 ionic2 应用程序中使用 ion-img 来正确加载我的图片。但是，我想知道是否有一种方法可以向用户指示图片实际上正在加载。

Thank you for your help!

谢谢您的帮助！

EDIT : Here is the answer if you absolutely need to use the ion-img tag. If not, you should use ionic-image-loaderas AdminDev826suggested.

编辑：如果您绝对需要使用 ion-img 标签，这里是答案。如果没有，您应该按照AdminDev826 的建议使用ionic-image-loader。

I finally solved that problem with CSS! When an image is loading in ionic 2, the ion-img tag doesn't have any class. However, when the image is finally loaded, the ion-img tag get the class "img-loaded".

我终于用 CSS 解决了这个问题！当图像在 ionic 2 中加载时， ion-img 标签没有任何类。但是，当最终加载图像时， ion-img 标签获得类“img-loaded”。

Here is my solution :

这是我的解决方案：

  <ion-img [src]="img.src"></ion-img>
  <ion-spinner></ion-spinner>

And my CSS :

还有我的 CSS ：

.img-loaded + ion-spinner {
  display:none;
}

I hope it can help someone!

我希望它可以帮助某人！

采纳答案by AdminDev826

Please use ionic-image-loader plugin

请使用 ionic-image-loader 插件

1. Install the NPM Package

   npm install --save ionic-image-loader
   

2. Install Required Plugins

   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. Import IonicImageLoader module

   Add IonicImageLoader.forRoot() in your app's root module

   import { IonicImageLoader } from 'ionic-image-loader';
   
   // import the module
   @NgModule({
    ...
     imports: [
       IonicImageLoader.forRoot()
     ]
   })
   export class AppModule {}
   

   Then add IonicImageLoader in your child/shared module(s)

   import { IonicImageLoader } from 'ionic-image-loader';
   
   @NgModule({
   ...
     imports: [
       IonicImageLoader
     ]
   })
   export class SharedModule {}
   

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

回答by Guillaume Le Mière

I finally solved that problem with CSS! When an image is loading in ionic 2, the ion-img tag doesn't have any class. However, when the image is finally loaded, the ion-img tag get the class "img-loaded".

我终于用 CSS 解决了这个问题！当图像在 ionic 2 中加载时， ion-img 标签没有任何类。但是，当最终加载图像时， ion-img 标签获得类“img-loaded”。

Here is my solution :

这是我的解决方案：

  <ion-img [src]="img.src"></ion-img>
  <ion-spinner></ion-spinner>

And my CSS :

还有我的 CSS ：

.img-loaded + ion-spinner {
  display:none;
}

I hope it can help someone!

我希望它可以帮助某人！

回答by M Fuat NURO?LU

If you want to use the imgtag instead of ion-imghere is the solution:

如果你想使用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>

In your CSS file you should write the following:

在您的 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;
}

loadedis a boolean variable with false default value you have to define in your component.

loaded是一个布尔变量，默认值为 false，您必须在组件中定义。

回答by Yossi Neiman

Your solution is not the best one because the app still downloads all the images, For example in a Facebook like app, You will be downloading all the images from the Feed to your app, This will make everything super slow.

您的解决方案不是最好的，因为该应用程序仍会下载所有图像，例如在 Facebook 之类的应用程序中，您将从 Feed 中下载所有图像到您的应用程序，这将使一切变得非常缓慢。

Use this: https://github.com/NathanWalker/ng2-image-lazy-load

使用这个：https: //github.com/NathanWalker/ng2-image-lazy-load