ionImgDidLoad fires before before inner img load event #17652
Description
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