Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit 19f44bd

Browse files
peterpeterparkerpeterpeterparker
committed
feat(#119): lazy load images using native lazy-loading
1 parent 2e2c2c2 commit 19f44bd

File tree

3 files changed

+27
-14
lines changed

3 files changed

+27
-14
lines changed

‎webcomponents/lazy-img/src/components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export namespace Components {
1616
'imgSizes': string;
1717
'imgSrc': string;
1818
'imgSrcSet': string;
19+
'intrinsicsize': string;
1920
'lazyLoad': () => Promise<void>;
2021
'observerRootMargin': string;
2122
'observerThreshold': number | number[];
@@ -44,6 +45,7 @@ declare namespace LocalJSX {
4445
'imgSizes'?: string;
4546
'imgSrc'?: string;
4647
'imgSrcSet'?: string;
48+
'intrinsicsize'?: string;
4749
'observerRootMargin'?: string;
4850
'observerThreshold'?: number | number[];
4951
'onLazyImgDidLoad'?: (event: CustomEvent<any>) => void;

‎webcomponents/lazy-img/src/components/lazy-img/deckdeckgo-lazy-img.tsx‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ export class DeckdeckgoLazyImg {
1313

1414
@Event() lazyImgDidLoad: EventEmitter;
1515

16-
@Prop({reflectToAttr: true})
16+
@Prop({reflect: true})
1717
imgSrc: string;
1818

19-
@Prop({reflectToAttr: true})
19+
@Prop({reflect: true})
2020
imgSrcSet: string;
2121

22-
@Prop({reflectToAttr: true})
22+
@Prop({reflect: true})
2323
imgAlt: string;
2424

25-
@Prop({reflectToAttr: true})
25+
@Prop({reflect: true})
2626
imgSizes: string;
2727

2828
@Prop()
@@ -34,12 +34,15 @@ export class DeckdeckgoLazyImg {
3434
@Prop()
3535
imgErrorSrc: string;
3636

37-
@Prop({reflectToAttr: true})
37+
@Prop({reflect: true})
3838
svgSrc: string;
3939

40-
@Prop({reflectToAttr: true})
40+
@Prop({reflect: true})
4141
ariaLabel: string;
4242

43+
@Prop()
44+
intrinsicsize: string;
45+
4346
@State()
4447
private svgContent: string;
4548

@@ -60,8 +63,11 @@ export class DeckdeckgoLazyImg {
6063
}
6164

6265
private async init() {
63-
if (window && 'IntersectionObserver' in window) {
64-
await this.deferLoad();
66+
if ('loading' in HTMLImageElement.prototype) {
67+
// In this case, loadImmediately apply the attributes but the platform will takes care of lazy loading the images
68+
await this.loadImmediately();
69+
} else if (window && 'IntersectionObserver' in window) {
70+
await this.deferIntersectionObserverLoad();
6571
} else {
6672
await this.loadImmediately();
6773
}
@@ -71,7 +77,7 @@ export class DeckdeckgoLazyImg {
7177
return this.load();
7278
}
7379

74-
private deferLoad(): Promise<void> {
80+
private deferIntersectionObserverLoad(): Promise<void> {
7581
return new Promise<void>((resolve) => {
7682
this.observer = new IntersectionObserver(this.onIntersection, {
7783
rootMargin: this.observerRootMargin,
@@ -189,9 +195,14 @@ export class DeckdeckgoLazyImg {
189195
</Host>
190196
} else {
191197
return <Host>
192-
<img alt={this.imgLoaded ? (this.imgAlt ? this.imgAlt : this.imgSrc) : ''} sizes={this.imgSizes ? this.imgSizes : undefined}
193-
onLoad={() => this.imgLoaded = true} onError={() => this.loadError()}/>
198+
{this.renderImage()}
194199
</Host>;
195200
}
196201
}
202+
203+
private renderImage() {
204+
// @ts-ignore
205+
return <img alt={this.imgLoaded ? (this.imgAlt ? this.imgAlt : this.imgSrc) : ''} loading="lazy" sizes={this.imgSizes ? this.imgSizes : undefined} intrinsicsize={this.intrinsicsize}
206+
onLoad={() => this.imgLoaded = true} onError={() => this.loadError()}/>
207+
}
197208
}

‎webcomponents/lazy-img/src/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<body>
2121

2222
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgoadsasd.png" img-error-src="https://deckdeckgo.com/assets/img/projector.svg"></deckgo-lazy-img>
23-
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgasdadso.png"></deckgo-lazy-img>
23+
<deckgo-lazy-img intrinsicsize="300x300" img-src="https://deckdeckgo.com/assets/img/deckdeckgasdadso.png"></deckgo-lazy-img>
2424

2525
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
2626

@@ -37,12 +37,12 @@
3737
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
3838
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
3939
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
40+
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo-homecoming.png"></deckgo-lazy-img>
4041
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
4142
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
4243
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
4344
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
44-
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
45-
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
45+
<deckgo-lazy-img img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg"></deckgo-lazy-img>
4646
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
4747
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>
4848
<deckgo-lazy-img img-src="https://deckdeckgo.com/assets/img/deckdeckgo.png"></deckgo-lazy-img>

0 commit comments

Comments
 (0)