如何檢查頁面中的所有圖像是否已完全加載：Angular

Question

我有包含路由器插座的父級，它在其中調用了另外 4 個子組件。 所有組件內部都有圖像標簽。 有沒有辦法顯示父組件的加載指示器，直到父組件和子組件中的所有資產都完全加載。

我已經在 ngAfterViewInit 中嘗試過這種方法，但它沒有按預期工作，首先它顯示加載器然后隱藏它並且父組件中的背景圖像正在逐步加載。 類似於我們在 google 中預覽大圖像。 我想在圖像完全加載時隱藏加載器。

父組件 HTML

<ng-container *ngIf="isLoading == true">
    <img src="./assets/images/loading.gif" alt="" width="20" height="20" />
</ng-container>
<ng-container *ngIf="isLoading == false">
    <section class="landing-page-outer">
       <div class="container">
          <div class="landing-page-inner">
             <div class="landing-page-bg">
                <img src="./assets/images/landing-bg.png" alt="" width="1920" height="1080" />
             </div>
             <div class="landing-content">
                <router-outlet></router-outlet>
             </div>
          </div>
       </div>
    </section>
</ng-container>

父組件 TS

public isLoading : boolean = true;

ngAfterViewInit() {
    this.isLoading = false;   
}

子組件 HTML

<div class="landing-child-block">
   <div class="landing-child-heading">
     <h3>heading</h3>
   </div>
   <div class="landing-child-image">
      <img src="./assets/images/landing-child-image.jpeg" alt="" width="200" height="200" />
   </div>
</div>

Answer 1

您可以使用load屬性並在此基礎上執行您的邏輯。

<img [src]="source" (load)="doAnything()">