feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image…

… is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

angular/src/directives/proxies.ts

@@ -293,13 +293,14 @@ proxyInputs(IonIcon, ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'm
export declare interface IonImg extends StencilComponents<'IonImg'> {}
@Component({ selector: 'ion-img', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['alt', 'src'] })
export class IonImg {
  ionImgWillLoad!: EventEmitter<CustomEvent>;
  ionImgDidLoad!: EventEmitter<CustomEvent>;
  ionError!: EventEmitter<CustomEvent>;
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef) {
    c.detach();
    this.el = r.nativeElement;
    proxyOutputs(this, this.el, ['ionImgDidLoad', 'ionError']);
    proxyOutputs(this, this.el, ['ionImgWillLoad', 'ionImgDidLoad', 'ionError']);
  }
}
proxyInputs(IonImg, ['alt', 'src']);

core/api.txt

@@ -382,6 +382,7 @@ ion-img,prop,alt,string | undefined,undefined,false,false
ion-img,prop,src,string | undefined,undefined,false,false
ion-img,event,ionError,void,true
ion-img,event,ionImgDidLoad,void,true
ion-img,event,ionImgWillLoad,void,true

ion-infinite-scroll-content,none
ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false

core/src/components.d.ts

@@ -1551,10 +1551,14 @@ export namespace Components {
    */
    'onIonError'?: (event: CustomEvent<void>) => void;
    /**
    * Emitted when the img src has been set
    * Emitted when the image has finished loading
    */
    'onIonImgDidLoad'?: (event: CustomEvent<void>) => void;
    /**
    * Emitted when the img src has been set
    */
    'onIonImgWillLoad'?: (event: CustomEvent<void>) => void;
    /**
    * The image URL. This attribute is mandatory for the <img> element.
    */
    'src'?: string;

core/src/components/img/img.tsx

@@ -35,6 +35,9 @@ export class Img implements ComponentInterface {
  }

  /** Emitted when the img src has been set */
  @Event() ionImgWillLoad!: EventEmitter<void>;

  /** Emitted when the image has finished loading */
  @Event() ionImgDidLoad!: EventEmitter<void>;

  /** Emitted when the img fails to load */
@@ -70,6 +73,10 @@ export class Img implements ComponentInterface {
  private load() {
    this.loadError = this.onError;
    this.loadSrc = this.src;
    this.ionImgWillLoad.emit();
  }

  private onLoad = () => {
    this.ionImgDidLoad.emit();
  }

@@ -98,6 +105,7 @@ export class Img implements ComponentInterface {
        src={this.loadSrc}
        alt={this.alt}
        decoding="async"
        onLoad={this.onLoad}
        onError={this.loadError}
      />
    );

core/src/components/img/readme.md

@@ -79,10 +79,11 @@ export default Example

## Events

| Event           | Description                           | Type                |
| --------------- | ------------------------------------- | ------------------- |
| `ionError`      | Emitted when the img fails to load    | `CustomEvent<void>` |
| `ionImgDidLoad` | Emitted when the img src has been set | `CustomEvent<void>` |
| Event            | Description                                 | Type                |
| ---------------- | ------------------------------------------- | ------------------- |
| `ionError`       | Emitted when the img fails to load          | `CustomEvent<void>` |
| `ionImgDidLoad`  | Emitted when the image has finished loading | `CustomEvent<void>` |
| `ionImgWillLoad` | Emitted when the img src has been set       | `CustomEvent<void>` |


----------------------------------------------

core/src/components/img/test/basic/index.html

@@ -67,6 +67,10 @@
    </style>
  </ion-app>
  <script>
    document.body.addEventListener('ionImgWillLoad', (event) => {
      console.log('image will load', event.target);
    });

    document.body.addEventListener('ionImgDidLoad', (event) => {
      console.log('image did load', event.target);
    });