Merge pull request #640 from vector-im/bwindels/lazyloadimageswhenpartiallyinview

load image in timeline from when it is partially visible

src/domain/session/room/timeline/tiles/BaseMediaTile.js

@@ -25,10 +25,8 @@ export class BaseMediaTile extends BaseMessageTile {
         super(options);
         this._decryptedThumbnail = null;
         this._decryptedFile = null;
+        this._isVisible = false;
         this._error = null;
-        if (!this.isPending) {
-            this._tryLoadEncryptedThumbnail();
-        }
     }
 
     get isUploading() {
@@ -60,6 +58,9 @@ export class BaseMediaTile extends BaseMessageTile {
     }
 
     get thumbnailUrl() {
+        if (!this._isVisible) {
+            return "";
+        }
         if (this._decryptedThumbnail) {
             return this._decryptedThumbnail.url;
         } else {
@@ -85,6 +86,15 @@ export class BaseMediaTile extends BaseMessageTile {
         return "";
     }
 
+    notifyVisible() {
+        super.notifyVisible();
+        this._isVisible = true;
+        this.emitChange("thumbnailUrl");
+        if (!this.isPending) {
+            this._tryLoadEncryptedThumbnail();
+        }
+    }
+
     get width() {
         const info = this._getContent()?.info;
         return Math.round(info?.w * this._scaleFactor());

src/platform/web/ui/session/room/timeline/ImageView.js

@@ -19,7 +19,6 @@ import {BaseMediaView} from "./BaseMediaView.js";
 export class ImageView extends BaseMediaView {
     renderMedia(t, vm) {
         const img = t.img({
-            loading: "lazy",
             src: vm => vm.thumbnailUrl,
             alt: vm => vm.label,
             title: vm => vm.label,