离子2 /离子3 /离子4 :(懒）加载微调器的图片 [英] Ionic 2 / Ionic 3 / Ionic 4 : (Lazy) Loading spinner for pictures

问题描述

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

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.

感谢您的帮助！

编辑：如果你绝对需要使用ion-img标签，这就是答案。如果没有，您应该使用 ionic-image-loader 作为AdminDev826 。

EDIT : Here is the answer if you absolutely need to use the ion-img tag. If not, you should use ionic-image-loader as AdminDev826 suggested.

我终于用CSS解决了这个问题！当图像以离子2加载时，ion-img标签没有任何类别。但是，当最终加载图像时，ion-img标签会获得img-loaded类。

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".

这是我的解决方案：

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

我的CSS：

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

我希望它可以帮助别人！

I hope it can help someone!

推荐答案

请使用ionic-image-loader插件

Please use ionic-image-loader plugin

1. 安装NPM套餐

1. Install the NPM Package

npm install --save ionic-image-loader

安装必需的插件

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

导入IonicImageLoader模块

Import IonicImageLoader module

在应用程序的根模块中添加IonicImageLoader.forRoot（）

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

然后在您的孩子中添加IonicImageLoader /共享模块

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

import { IonicImageLoader } from 'ionic-image-loader';

@NgModule({
...
  imports: [
    IonicImageLoader
  ]
})
export class SharedModule {}

这篇关于离子2 /离子3 /离子4 :(懒）加载微调器的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！