Ionic 2 / Ionic 3 / Ionic 4 ：（懒惰）加载图片微调器

Question

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

感谢您的帮助！

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

我终于用 CSS 解决了这个问题！当图像在 ionic 2 中加载时，ion-img 标签没有任何 class。然而，当图像最终加载时，ion-img 标签得到 class "img-loaded".

这是我的解决方案：

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

还有我的 CSS :

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

希望对大家有所帮助！

Answer 1

我终于用 CSS 解决了这个问题！当图像在 ionic 2 中加载时，ion-img 标签没有任何 class。然而，当图像最终加载时，ion-img 标签得到 class "img-loaded".

这是我的解决方案：

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

还有我的 CSS :

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

希望对大家有所帮助！

Answer 2

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

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

Answer 3

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

请使用ionic-image-loader插件

安装 NPM 包
```
npm install --save ionic-image-loader
```

安装所需的插件

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 模块

在应用程序的根模块中添加 IonicImageLoader.forRoot()

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

// import the module
@NgModule({
 ...
  imports: [
    IonicImageLoader.forRoot()
  ]
})
export class AppModule {}

然后在您的 child/shared 个模块中添加 IonicImageLoader

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

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

Answer 5

ionic-image-loader 不适用于 ionic4+。您必须创建一个组件：

HTML

<ion-spinner name="dots" [hidden]="viewImage" color="primary"></ion-spinner>
<ion-img #image alt=""(ionImgDidLoad)="loadImage()" (ionError)="errorLoad()"></ion-img>

打字稿

    @Component({
      selector: 'preloader-img',
      templateUrl: './preloader-img.component.html',
      styles: [`
        ion-spinner {
          display: block;
          margin: auto;
        }
      `],
    })
    export class PreloaderImgComponent implements AfterViewInit {
      viewImage = false;

      @Input() url: string;
      @ViewChild('image', { static: false }) imageRef: IonImg;


      ngAfterViewInit() {
        this.imageRef.src = this.url;
      }
      loadImage() {
        this.viewImage = true;
      }
      errorLoad() {
        this.imageRef.src = '<your_default_img>';
      }
    }

Ionic 2 / Ionic 3 / Ionic 4 ：（懒惰）加载图片微调器

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

mobile

sass

typescript

ionic2

angular