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

Posted 2023-03-07

【中文标题】Ionic 2 / Ionic 3 / Ionic 4：（懒惰）加载图片的微调器

【英文标题】：Ionic 2 / Ionic 3 / Ionic 4 : (Lazy) Loading spinner for pictures

【发布时间】：2016-12-15 05:39:50

【问题描述】：

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

感谢您的帮助！

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

我终于用 CSS 解决了这个问题！当图像在 ionic 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;

希望对大家有所帮助！

【参考方案1】：

我终于用 CSS 解决了这个问题！当图像在 ionic 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;

希望对大家有所帮助！

【参考方案2】：

如果您想使用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，您必须在组件中定义。

【讨论】：

但您需要为每张图片添加一个微调器

这实际上是比使用ion-img 更好的方法，因为load 事件在图像完全加载时调用此方法，但在ion-img 设置@987654330 时调用ionImgDidLoad 事件图像的@属性，而不是图像完全加载时。

【参考方案3】：

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

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

import  IonicImageLoader  from 'ionic-image-loader';

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

【讨论】：

更多详情请查看此链接

我实际上正在使用它 ;-) 谢谢你的新答案！

希望你能接受这个答案然后不行吗？ @GuillaumeLeMière

这不适用于 angular 5 - 图像加载器永远不会消失

我在 Ionic 3 和 Angular 5 上试过，但没有添加任何微调器

【参考方案4】：

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

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

【讨论】：

这取决于您如何使用该代码。在 facebook 风格的应用程序中，只需使用以下内容：ionicframework.com/docs/v2/api/components/infinite-scroll/…

@Yossi Neiman 你有一个例子我可以在 ionic2 应用程序中使用 ng2-image-lazy-load 吗？

【参考方案5】：

ionic-image-loader 在 ionic4+ 中不起作用。您必须创建一个组件：

html

<ion-spinner name="dots" [hidden]="viewImage" color="primary"></ion-spinner>
<ion-img #image (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>';