ionImgDidLoad fires before before inner img load event

Bug Report

Ionic version:

[x] 4.x

Current behavior:

I want to display a placeholder image while the ion-img is loading using ion-img component and binding to the ionImgDidLoad event. the event would fire as soon as the image start loading. Expected behavior: from its name ionImgDidLoad event must be fired after the image have been completely loaded.

Steps to reproduce:

Related code: https://stackblitz.com/edit/ionic-4-template-fewyal?embed=1&file=src/app/home/home.page.html https://stackblitz.com/edit/ionic-4-template-fewyal?embed=1&file=src/app/home/home.page.html

<ion-content padding>
    <ion-img class="placeholder-img" 
      src="https://via.placeholder.com/150"
      [style.display]="loaded ? 'none' : 'unset'"
    ></ion-img>

    <ion-img class="full-img"
      [src]="'https://picsum.photos/5000/5000'"
      [style.opacity]="loaded ? 1 : 0"

      (ionImgDidLoad)="loaded = true"
      ></ion-img>
</ion-content>

Other information: the issue is related to this part of the ion-img source private load() { this.loadSrc = this.src; this.ionImgDidLoad.emit(); } the event is triggered as soon as the src attribute is set, i think this event must be frenamed to ionImgStartLoad, and add another event ionImgDidLoad that is fired when the inner img load completed. Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (C:\Users\jahmani\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 7.3.1
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

[liamdebeasi]

Hi @jahmani,

Thanks for the additional info! I am able to reproduce what you are describing. Thanks for the bug report – we will look into this!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.