diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 85140642e2..3a2603d267 100644
--- a/angular/src/directives/proxies.ts
+++ b/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']);
diff --git a/core/api.txt b/core/api.txt
index 3d86310567..00a62c6637 100644
--- a/core/api.txt
+++ b/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
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 2416aff5b6..228c533ebc 100644
--- a/core/src/components.d.ts
+++ b/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;
diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx
index 06c52cace3..21d3a50506 100644
--- a/core/src/components/img/img.tsx
+++ b/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}
       />
     );
diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md
index 73909e6bdb..a9a28c16dc 100644
--- a/core/src/components/img/readme.md
+++ b/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>` |
 
 
 ----------------------------------------------
diff --git a/core/src/components/img/test/basic/index.html b/core/src/components/img/test/basic/index.html
index 4ac6d576e3..71b054c6c4 100644
--- a/core/src/components/img/test/basic/index.html
+++ b/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);
     });