Skip to content

Commit afa2cde

Browse files
committed
feat: add support for an IntersectionObserver in case the images are lazily loaded
1 parent 844fdb6 commit afa2cde

File tree

1 file changed

+22
-3
lines changed

1 file changed

+22
-3
lines changed

src/packages/media/imaging/components/imaging-thumbnail.element.ts

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,33 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
6565

6666
#imagingRepository = new UmbImagingRepository(this);
6767

68-
protected override firstUpdated() {
69-
this.#generateThumbnailUrl();
70-
}
68+
#intersectionObserver?: IntersectionObserver;
7169

7270
override render() {
7371
return html` ${this.#renderThumbnail()} ${when(this._isLoading, () => this.#renderLoading())} `;
7472
}
7573

74+
override connectedCallback() {
75+
super.connectedCallback();
76+
77+
if (this.loading === 'lazy') {
78+
this.#intersectionObserver = new IntersectionObserver((entries) => {
79+
if (entries[0].isIntersecting) {
80+
this.#generateThumbnailUrl();
81+
this.#intersectionObserver?.disconnect();
82+
}
83+
});
84+
this.#intersectionObserver.observe(this);
85+
} else {
86+
this.#generateThumbnailUrl();
87+
}
88+
}
89+
90+
override disconnectedCallback() {
91+
super.disconnectedCallback();
92+
this.#intersectionObserver?.disconnect();
93+
}
94+
7695
#renderLoading() {
7796
return html`<div class="container"><uui-loader></uui-loader></div>`;
7897
}

0 commit comments

Comments
 (0)