/
onload.component.ts
42 lines (39 loc) 路 1.24 KB
/
onload.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'default-image',
styles: [`
img {
width: 100%;
}
img.hidden {
visibility: hidden;
}
`],
template: `
<div *ngIf="isLoading">Image is loading...</div>
<div *ngIf="!isLoading">Image is loaded</div>
<div [ngClass]="{'hidden': isLoading}">
<img
[defaultImage]="defaultImage"
[errorImage]="errorImage"
[lazyLoad]="image"
(onLoad)="onLoadImage($event)">
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnLoadComponent {
isLoading = true;
errorImage = 'https://i.imgur.com/XkU4Ajf.png';
defaultImage = 'https://www.placecage.com/1000/1000';
image = 'https://images.unsplash.com/photo-1467932760935-519284fc87fa?dpr=2&auto=compress,format&fit=crop&w=1199&h=800&q=80';
constructor(private cd: ChangeDetectorRef) {}
onLoadImage(success: boolean) {
if (success) {
this.isLoading = false;
this.cd.detectChanges();
} else {
alert('Image cannot be loaded!');
}
}
}