*ngFor有多个镜像标签-如何知道所有镜像src何时加载

Question

我有一个图像urls数组。在HTML端，我将它显示在*ngFor标签中。

使用的技术堆栈-离子4，角度10

<div *ngFor="let url of imagesToLoad; let i = index">
            <ion-img [src]="url"></ion-img>
</div>

可以对imagesToLoad数组进行混洗，如果图像已经加载，则不会再次调用url，因此不会触发imageLoaded事件。

我想知道我们是否可以在加载所有图像后调用一个函数。

请参考此链接了解stackblitz。https://stackblitz.com/edit/angular-ynceyn?file=src%2Fapp%2Fapp.component.html

Answer 1

快速浏览一下文档：https://ionicframework.com/docs/api/img

它看起来像是暴露了ionImgDidLoad事件，所以你可以绑定到它：

<ion-img [src]="url" (ionImgDidLoad)="onImageLoaded()"></ion-img>

然后数一下呼叫数：

private loadCount = 0;
public onImageLoaded(): void {
   this.loadCount++;
   if(this.loadCount === this.imagesToLoad.length) {
       console.debug('All images loaded');
   }
}

Answer 2

我不认为你可以在html中触发回调函数。

您可以做的是，向镜像发出GET请求。

假设您得到的是B64编码的响应。您可以将此数据传递到img标记的src属性中，如here所示。通过这种方式，您可以确保在注入img标签之前加载了所有图像。

您还可以在img上处理onload事件。

例如：

var img = document.getElementsByClassName('img-class');
img.forEach(image => image.onload(function(e) {console.log("image loaded.")}));

这将在每个图像加载后调用onload函数。如果您想在加载完所有图像后加载一次

我还看到在ionic img上有ionImgDidLoad事件。你可以用它。