Ionic 2/Ionic 3/Ionic 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 解决了这个问题！当图像在 ionic 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;
}

希望对大家有所帮助！

推荐答案

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

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