From ee9a0bcd053b1e64ed6f689f67561f951512559c Mon Sep 17 00:00:00 2001
From: Tim Schaub <tim.schaub@gmail.com>
Date: Thu, 16 May 2019 08:06:12 -0600
Subject: [PATCH] Stop listening for image decoding

---
 src/ol/Image.js           | 48 +++++++++++++++++++++++----------------
 src/ol/ImageTile.js       |  9 +++++---
 src/ol/style/IconImage.js |  9 +++++---
 3 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/ol/Image.js b/src/ol/Image.js
index 45d0cf07cf..74c53c29b1 100644
--- a/src/ol/Image.js
+++ b/src/ol/Image.js
@@ -121,7 +121,7 @@ class ImageWrapper extends ImageBase {
       this.state = ImageState.LOADING;
       this.changed();
       this.imageLoadFunction_(this, this.src_);
-      this.imageListenerKeys_ = listenImage(
+      this.unlisten_ = listenImage(
         this.image_,
         this.handleImageLoad_.bind(this),
         this.handleImageError_.bind(this)
@@ -142,7 +142,10 @@ class ImageWrapper extends ImageBase {
    * @private
    */
   unlistenImage_() {
-    unlistenImage(this.imageListenerKeys_);
+    if (this.unlisten_) {
+      this.unlisten_();
+      this.unlisten_ = null;
+    }
   }
 }
 
@@ -150,31 +153,36 @@ class ImageWrapper extends ImageBase {
  * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} image Image element.
  * @param {function():any} loadHandler Load callback function.
  * @param {function():any} errorHandler Error callback function.
- * @return {Array<import("./events.js").EventsKey>} listener keys.
+ * @return {function():void} Callback to stop listening.
  */
 export function listenImage(image, loadHandler, errorHandler) {
   const img = /** @type {HTMLImageElement} */ (image);
   if (img.decode) {
-    img.decode().then(loadHandler).catch(errorHandler);
-    return null;
-  } else {
-    const listenerKeys = [
-      listenOnce(img, EventType.LOAD, loadHandler),
-      listenOnce(img, EventType.ERROR, errorHandler)
-    ];
-    return listenerKeys;
+    const promise = img.decode();
+    let listening = true;
+    const unlisten = function() {
+      listening = false;
+    };
+    promise.then(function() {
+      if (listening) {
+        loadHandler();
+      }
+    }).catch(function(error) {
+      if (listening) {
+        errorHandler();
+      }
+    });
+    return unlisten;
   }
 
-}
-
-/**
- * @param {Array<import("./events.js").EventsKey>} listenerKeys listener keys.
- */
-export function unlistenImage(listenerKeys) {
-  if (listenerKeys) {
+  const listenerKeys = [
+    listenOnce(img, EventType.LOAD, loadHandler),
+    listenOnce(img, EventType.ERROR, errorHandler)
+  ];
+  return function unlisten() {
     listenerKeys.forEach(unlistenByKey);
-    listenerKeys = null;
-  }
+  };
 }
 
+
 export default ImageWrapper;
diff --git a/src/ol/ImageTile.js b/src/ol/ImageTile.js
index b6a5496e03..0a4989d64a 100644
--- a/src/ol/ImageTile.js
+++ b/src/ol/ImageTile.js
@@ -4,7 +4,7 @@
 import Tile from './Tile.js';
 import TileState from './TileState.js';
 import {createCanvasContext2D} from './dom.js';
-import {listenImage, unlistenImage} from './Image.js';
+import {listenImage} from './Image.js';
 
 
 class ImageTile extends Tile {
@@ -134,7 +134,7 @@ class ImageTile extends Tile {
       this.state = TileState.LOADING;
       this.changed();
       this.tileLoadFunction_(this, this.src_);
-      this.imageListenerKeys_ = listenImage(
+      this.unlisten_ = listenImage(
         this.image_,
         this.handleImageLoad_.bind(this),
         this.handleImageError_.bind(this)
@@ -148,7 +148,10 @@ class ImageTile extends Tile {
    * @private
    */
   unlistenImage_() {
-    unlistenImage(this.imageListenerKeys_);
+    if (this.unlisten_) {
+      this.unlisten_();
+      this.unlisten_ = null;
+    }
   }
 }
 
diff --git a/src/ol/style/IconImage.js b/src/ol/style/IconImage.js
index 45214a22cd..30a66f430d 100644
--- a/src/ol/style/IconImage.js
+++ b/src/ol/style/IconImage.js
@@ -7,7 +7,7 @@ import EventTarget from '../events/Target.js';
 import EventType from '../events/EventType.js';
 import ImageState from '../ImageState.js';
 import {shared as iconImageCache} from './IconImageCache.js';
-import {listenImage, unlistenImage} from '../Image.js';
+import {listenImage} from '../Image.js';
 
 
 class IconImage extends EventTarget {
@@ -191,7 +191,7 @@ class IconImage extends EventTarget {
       } catch (e) {
         this.handleImageError_();
       }
-      this.imageListenerKeys_ = listenImage(
+      this.unlisten_ = listenImage(
         this.image_,
         this.handleImageLoad_.bind(this),
         this.handleImageError_.bind(this)
@@ -233,7 +233,10 @@ class IconImage extends EventTarget {
    * @private
    */
   unlistenImage_() {
-    unlistenImage(this.imageListenerKeys_);
+    if (this.unlisten_) {
+      this.unlisten_();
+      this.unlisten_ = null;
+    }
   }
 }