angular – 如何在Ionic 2或3应用程序中加载实际图像之前显示占

<ion-card *ngFor="let item of items">
  <img [src]="item.picture" (load)="item.loaded = true" [hidden]="!item.loaded" />
  <img src="../path/to/your/placeholer/image.jpg" [hidden]="item.loaded">
</ion-card>

您将有一个加载的属性始终初始化为false,当图像加载时(load)事件将被触发并将图像加载属性更改为true,隐藏占位符图像并显示加载的图像.

如果您无法更改此JSON(或者如果它太大而无法编辑),您可以使用上面的代码,但在页面中执行以下操作.

public functionWhoseIsLoadingYourJson(){
  // HTTP REQUEST FOR JSON
  .subscribe(response => {
    response.forEach(element => {
      element.loaded = false;
    });
    this.items = response;
  });
}

只需迭代您的响应,并在每个对象中将加载的属性设置为false.如果这会引发一些错误,你可以把你的< ion-card>在一个带有* ngIf的div中

<div *ngIf="this.items != null">
  <!-- ion card -->
</div>

编辑 – 更新JSON

由于它来自Firebase,因此有三个选项可用于更新您的JSON.第一个是一个函数,你只执行一次更新数据库,第二个仍然是我给出的代码(迭代结果并推送布尔值)但是因为你使用的是Firebase所以它会有所不同.

第一解决方案

在代码中的某个地方,它可以是任何页面,您只需要执行一次：

firebase.database().ref('myDataNode').on('value',snapshot => {
  for(let key in snapshot.val()){
    firebase.database().ref('myDataNode/' + key + '/loaded').set(false);
  }
});

看到我正在循环遍历myDataNode中的所有resuts并使用它们的键将加载的属性设置为false.但是在使用set时要小心,因为您可以覆盖所有节点,在执行此方法之前,请记住导出Firebase节点以进行备份.如果您从代码中的任何位置将图像推送到Firebase,请记住更改它以将加载的属性设置在一起.

如上所述,第二个是我在这个答案中所做的,但现在在Firebase调用中使用它并使用快照附带的forEach方法：

firebase.database().ref('myDataNode').on('value',snapshot => {
  snapshot.forEach(element =>{
    this.myDataNode.push({
      picture: element.val(),// maybe it needs to be element.val().nameOfYourProperty
      loaded: false
    })
  });
});

这将使用图片网址和已加载的属性将新元素推送到您的数组.如果无法识别.push()方法,只需将变量声明为数组：

public myDataNode: any[];

第三个是本地更新,通过您的firebase快照进行更新,将结果保存在本地变量中,创建一个新属性并将其推送到您的数组：

firebase.database().ref('myDataNode').on('value',snapshot => {
  for (let key in snapshot.val()){
    snapshot.forEach(item => { // iterate snapshot
      let record = item.val(); // save the snapshot item value in a local variable
      record.loaded = true; // add the property
      this.newArray.push(record); // push it to your array that'll  be used in ng-for
      return true; // return true to foreach
    });
  }
});

希望这可以帮助.