Skip to content

Commit 38ffb98

Browse files
vhinicbrandyscarney
authored andcommitted
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
1 parent 0e4726b commit 38ffb98

File tree

6 files changed

+25
-6
lines changed

6 files changed

+25
-6
lines changed

angular/src/directives/proxies.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,13 +293,14 @@ proxyInputs(IonIcon, ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'm
293293
export declare interface IonImg extends StencilComponents<'IonImg'> {}
294294
@Component({ selector: 'ion-img', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['alt', 'src'] })
295295
export class IonImg {
296+
ionImgWillLoad!: EventEmitter<CustomEvent>;
296297
ionImgDidLoad!: EventEmitter<CustomEvent>;
297298
ionError!: EventEmitter<CustomEvent>;
298299
protected el: HTMLElement;
299300
constructor(c: ChangeDetectorRef, r: ElementRef) {
300301
c.detach();
301302
this.el = r.nativeElement;
302-
proxyOutputs(this, this.el, ['ionImgDidLoad', 'ionError']);
303+
proxyOutputs(this, this.el, ['ionImgWillLoad', 'ionImgDidLoad', 'ionError']);
303304
}
304305
}
305306
proxyInputs(IonImg, ['alt', 'src']);

core/api.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -382,6 +382,7 @@ ion-img,prop,alt,string | undefined,undefined,false,false
382382
ion-img,prop,src,string | undefined,undefined,false,false
383383
ion-img,event,ionError,void,true
384384
ion-img,event,ionImgDidLoad,void,true
385+
ion-img,event,ionImgWillLoad,void,true
385386

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

core/src/components.d.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1551,10 +1551,14 @@ export namespace Components {
15511551
*/
15521552
'onIonError'?: (event: CustomEvent<void>) => void;
15531553
/**
1554-
* Emitted when the img src has been set
1554+
* Emitted when the image has finished loading
15551555
*/
15561556
'onIonImgDidLoad'?: (event: CustomEvent<void>) => void;
15571557
/**
1558+
* Emitted when the img src has been set
1559+
*/
1560+
'onIonImgWillLoad'?: (event: CustomEvent<void>) => void;
1561+
/**
15581562
* The image URL. This attribute is mandatory for the <img> element.
15591563
*/
15601564
'src'?: string;

core/src/components/img/img.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ export class Img implements ComponentInterface {
3535
}
3636

3737
/** Emitted when the img src has been set */
38+
@Event() ionImgWillLoad!: EventEmitter<void>;
39+
40+
/** Emitted when the image has finished loading */
3841
@Event() ionImgDidLoad!: EventEmitter<void>;
3942

4043
/** Emitted when the img fails to load */
@@ -70,6 +73,10 @@ export class Img implements ComponentInterface {
7073
private load() {
7174
this.loadError = this.onError;
7275
this.loadSrc = this.src;
76+
this.ionImgWillLoad.emit();
77+
}
78+
79+
private onLoad = () => {
7380
this.ionImgDidLoad.emit();
7481
}
7582

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

core/src/components/img/readme.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,11 @@ export default Example
7979

8080
## Events
8181

82-
| Event | Description | Type |
83-
| --------------- | ------------------------------------- | ------------------- |
84-
| `ionError` | Emitted when the img fails to load | `CustomEvent<void>` |
85-
| `ionImgDidLoad` | Emitted when the img src has been set | `CustomEvent<void>` |
82+
| Event | Description | Type |
83+
| ---------------- | ------------------------------------------- | ------------------- |
84+
| `ionError` | Emitted when the img fails to load | `CustomEvent<void>` |
85+
| `ionImgDidLoad` | Emitted when the image has finished loading | `CustomEvent<void>` |
86+
| `ionImgWillLoad` | Emitted when the img src has been set | `CustomEvent<void>` |
8687

8788

8889
----------------------------------------------

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@
6767
</style>
6868
</ion-app>
6969
<script>
70+
document.body.addEventListener('ionImgWillLoad', (event) => {
71+
console.log('image will load', event.target);
72+
});
73+
7074
document.body.addEventListener('ionImgDidLoad', (event) => {
7175
console.log('image did load', event.target);
7276
});

0 commit comments

Comments
 (0)