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);
     });