我正在研究Ionic应用程序,我正在从JSON提要中动态加载图像.我希望当从外部URL拉入图像时,占位符图像显示在其位置,此后,占位符图像应该在加载后由“真实”图像替换.
我目前的情况的一个例子是：
<ion-card *ngFor="let item of items"... <img [src]="item.picture" />
谢谢&问候.
<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
});
}
});
希望这可以帮助.
