only draw frames when canvas is in viewport

mediamonks · Apr 13, 2024 · e36047f · e36047f
1 parent ab3dcf3
commit e36047f
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/src/lib/FastImageSequence.ts b/src/lib/FastImageSequence.ts
@@ -303,12 +303,18 @@ export class FastImageSequence {
     //     }
     // }
 
-    const currentFrame = this.frames[index] as Frame;
-    currentFrame.getImage().then((image) => {
-      this.drawFrame(image, index);
-    }).catch(() => {
-    });
 
+    // check if canvas is in viewport
+    const rect = this.canvas.getBoundingClientRect();
+    const inViewport = rect.top < window.innerHeight && rect.bottom > 0;
+
+    if (inViewport) {
+      const currentFrame = this.frames[index] as Frame;
+      currentFrame.getImage().then((image) => {
+        this.drawFrame(image, index);
+      }).catch(() => {
+      });
+    }
 
     this.load(dt);