Mobile 离子2/离子3/离子4：（惰性）加载图片微调器

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

谢谢你的帮助

EDIT：如果您确实需要使用ion img标签，以下是答案。如果没有，请按照建议使用。

---

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

以下是我的解决方案：

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

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

---

我希望它能帮助别人

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

以下是我的解决方案：

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

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

---

我希望它能帮助别人

你的解决方案不是最好的，因为应用程序仍然下载所有图像，例如，在类似Facebook的应用程序中，你将从提要下载所有图像到你的应用程序中，这将使一切变得超级缓慢

使用以下命令：

---

如果您想使用

img

标签而不是

ionimg

，以下是解决方案：

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

---

loaded

是一个布尔变量，必须在组件中定义错误的默认值。

请使用离子图像加载插件

安装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

---

ionic映像加载程序在ionic4+中不工作。您必须创建一个组件：

HTML

打字稿

    @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>';
      }
    }

@组件({
选择器：“预加载img”，
templateUrl:'。/预加载img.component.html'，
风格：[`
离子旋转器{
显示：块；
保证金：自动；
}
`],
})
导出类PreforeRimgComponent实现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=''；
}
}

这取决于您如何使用该代码。在facebook风格的应用程序中，只需使用以下内容：@Yossi Neiman您是否有一个示例，说明我如何在ionic2应用程序中使用ng2图像延迟加载？请查看此链接以了解更多详细信息，我实际上正在使用它；-）谢谢你的新答案！希望你能接受这个答案然后不@GuillaumeLeMièreThis不适用于angular 5-图像加载程序从未消失我尝试过使用Ionic 3和angular 5，但它没有添加任何喷丝头，但您需要为每个图像添加一个喷丝头这实际上比使用

ion img

更好，因为

load

事件在此方法中在图像完全加载时调用，但是在

ionimg

中，在设置图像的

src

属性时调用

ionImgDidLoad

事件，而不是在图像完全加载时调用。

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

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

<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>';
      }
    }