Skip to content
Permalink
Browse files

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
  • Loading branch information...
vhinic authored and brandyscarney committed May 1, 2019
1 parent 0e4726b commit 38ffb984213bfa4626f5ed97dc8765e420684b93
@@ -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']);
@@ -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
@@ -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;
@@ -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}
/>
);
@@ -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>` |


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

0 comments on commit 38ffb98

Please sign in to comment.
You can’t perform that action at this time.