ionImgDidLoad fires before before inner img load event

[jahmani]

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 there,

Thanks for opening an issue with us! Which browser/version are you seeing this issue with?

[jahmani]

Google crome

[jahmani]

But I think it's unrelated to the browser. It's a bug in the ion-img component code.
It must wait the inner image load event before emiting this Event - ionImgDidLoad - .
Also I suggest adding another onError event in case the img failed to load. Or providing a public proxy property for the inner img element

[liamdebeasi]

Hi there,

Thanks for the follow up. I am not seeing the issue you are describing. Can you provide a repository with the code required to reproduce this issue?

Thanks!

[jahmani]

Hi @liamdebeasi
TLDR: using ion-img. how to show a placeholder img while the ion-img src being loaded or if it failed to load?

https://stackblitz.com/edit/ionic-4-template-fewyal?embed=1&file=src/app/home/home.page.html
in this stackblitz example .
in a normal html img element a placeholder img will be displayed while loading the full-img or if loading full-img failed;
in the ion-img element. the placeholder not displayed at all. the full-img will be rendered as soon as it's being observed.

[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!