File tree Expand file tree Collapse file tree 1 file changed +22
-3
lines changed
src/packages/media/imaging/components Expand file tree Collapse file tree 1 file changed +22
-3
lines changed Original file line number Diff line number Diff line change @@ -65,14 +65,33 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
65
65
66
66
#imagingRepository = new UmbImagingRepository ( this ) ;
67
67
68
- protected override firstUpdated ( ) {
69
- this . #generateThumbnailUrl( ) ;
70
- }
68
+ #intersectionObserver?: IntersectionObserver ;
71
69
72
70
override render ( ) {
73
71
return html ` ${ this . #renderThumbnail( ) } ${ when ( this . _isLoading , ( ) => this . #renderLoading( ) ) } ` ;
74
72
}
75
73
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
+
76
95
#renderLoading( ) {
77
96
return html `<div class= "container" > <uui- loader> </ uui- loader> </ div> ` ;
78
97
}
You can’t perform that action at this time.
0 commit comments