Ionic4+Angular10中使用*ngFor加载多张图片时如何判断所有src加载完成

核心逻辑通过监听ion-img的内置加载事件，维护加载状态计数器，同时配置trackBy优化数组重排时的渲染逻辑，兼容浏览器缓存场景的状态统计。

1. 模板代码调整 #

<div *ngFor="let url of imagesToLoad; let i = index; trackBy: trackByUrl">
  <ion-img 
    [src]="url"
    (ionImgWillLoad)="onImageStartLoad()"
    (ionImgDidLoad)="onImageFinishLoad()"
  ></ion-img>
</div>

2. 组件逻辑代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-image-list',
  templateUrl: './image-list.component.html',
  styleUrls: ['./image-list.component.scss'],
})
export class ImageListComponent {
  // 你的图片URL数组
  imagesToLoad: string[] = [];
  // 加载状态计数器
  private totalImages = 0;
  private loadedImages = 0;

  // 数组重排时仅更新URL变更的项，避免重复统计加载状态
  trackByUrl(index: number, url: string): string {
    return url;
  }

  // 图片开始加载时触发，更新总待加载数量
  onImageStartLoad(): void {
    this.totalImages++;
  }

  // 图片加载完成时触发，判断是否全部加载完毕
  onImageFinishLoad(): void {
    this.loadedImages++;
    if (this.loadedImages === this.totalImages) {
      // 调用你需要执行的指定函数
      this.yourCustomFunction();
      // 重置计数器，适配下一次数组更新
      this.totalImages = 0;
      this.loadedImages = 0;
    }
  }

  // 自定义的目标执行函数
  yourCustomFunction(): void {
    // 此处填写你的业务逻辑
    console.log('全部图片已加载完成');
  }
}

缓存场景适配说明 #

已加载过的缓存图片依然会触发ionImgWillLoad和ionImgDidLoad事件，不会因为资源复用跳过事件触发，因此即使数组重排后复用已有缓存资源，也能准确统计加载进度。

内容的提问来源于stack exchange，提问作者Ankit Joshi