Implement canvas image element caching

1 files changed, 10 insertions, 1 deletions

diff --git a/src/components/map/elements/ImageComponent.js b/src/components/map/elements/ImageComponent.js
index 00766496..486296ea 100644
--- a/src/components/map/elements/ImageComponent.js
+++ b/src/components/map/elements/ImageComponent.js
@@ -3,6 +3,7 @@ import React from "react";
 import {Image} from "react-konva";
 
 class ImageComponent extends React.Component {
+    static imageCaches = {};
     static propTypes = {
         src: PropTypes.string.isRequired,
         x: PropTypes.number.isRequired,
@@ -17,9 +18,17 @@ class ImageComponent extends React.Component {
     };
 
     componentDidMount() {
+        if (ImageComponent.imageCaches[this.props.src]) {
+            this.setState({image: ImageComponent.imageCaches[this.props.src]});
+            return;
+        }
+
         const image = new window.Image();
         image.src = this.props.src;
-        image.onload = () => this.setState({image});
+        image.onload = () => {
+            this.setState({image});
+            ImageComponent.imageCaches[this.props.src] = image;
+        }
     }
 
     render() {