Ionic-framework: 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!

[vhinic]

I would like to propose having two events:

• ionImgDidLoad - Emitted when the img has been loaded
• ionImgIsLoading - Emitted when the img src has been set (i.e., actual img loading starts)

Notice, that in current implementation ionImgDidLoad is emitted as soon as src is set. This proposal suggest that instead ionImgIsLoading is emitted when img src is set and then when actual image is loaded, emit ionImgDidLoad.

Also notice that this would be a breaking change since it is changing when ionImgDidLoad is emitted.

I will be submitting PR for this shortly for review.

[liamdebeasi]

Hi @vhinic,

Please submit a Feature Request. This thread is only being used to track the bug noted by the author.

Thanks!

[vhinic]

Hi @liamdebeasi, I'm a bit confused... I'm offering to fix the bug reported by @jahmani. Why is new issue required?

[liamdebeasi]

Hi @vhinic,

In addition to fixing the bug, you are proposing a new API called ionImgIsLoading, so we typically ask for a Feature Request so we can track and discuss the changes.

I would recommend having the feature and bug be separate PRs. That way we can get this fix in, and we can discuss the new API separately.

[vhinic]

I understand. I'm only proposing introduction of new event so that existing functionality can be retained. The new behaviour for existing event ionImgDidLoadis fixing original issue. But capturing existing behaviour have value as well. That is why I proposed introducing ionImgIsLoading so that existing functionality is not lost. My apology if this was not clear.

[vhinic]

I create new feature request that addresses and expands on above issue. New feature request:
https://github.com/ionic-team/ionic/issues/18161

[liamdebeasi]

Ah that makes sense. Ok I will talk with the team to see if ionImgIsLoading is an API we'd like to introduce to the framework. You can keep your PR as it is for now, and we will follow up there for any discussion regarding it. 🙂

Thanks!

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