Merge pull request #13899 from tschaub/lazy-image

Wait until first load to create icon image

src/ol/style/IconImage.js

@@ -37,11 +37,13 @@ class IconImage extends EventTarget {
      * @private
      * @type {HTMLImageElement|HTMLCanvasElement}
      */
-    this.image_ = !image ? new Image() : image;
+    this.image_ = image;
 
-    if (crossOrigin !== null) {
-      /** @type {HTMLImageElement} */ (this.image_).crossOrigin = crossOrigin;
-    }
+    /**
+     * @private
+     * @type {string|null}
+     */
+    this.crossOrigin_ = crossOrigin;
 
     /**
      * @private
@@ -85,6 +87,16 @@ class IconImage extends EventTarget {
     this.tainted_;
   }
 
+  /**
+   * @private
+   */
+  initializeImage_() {
+    this.image_ = new Image();
+    if (this.crossOrigin_ !== null) {
+      this.image_.crossOrigin = this.crossOrigin_;
+    }
+  }
+
   /**
    * @private
    * @return {boolean} The image canvas is tainted.
@@ -142,6 +154,9 @@ class IconImage extends EventTarget {
    * @return {HTMLImageElement|HTMLCanvasElement} Image or Canvas element.
    */
   getImage(pixelRatio) {
+    if (!this.image_) {
+      this.initializeImage_();
+    }
     this.replaceColor_(pixelRatio);
     return this.canvas_[pixelRatio] ? this.canvas_[pixelRatio] : this.image_;
   }
@@ -166,6 +181,9 @@ class IconImage extends EventTarget {
    * @return {HTMLImageElement|HTMLCanvasElement} Image element.
    */
   getHitDetectionImage() {
+    if (!this.image_) {
+      this.initializeImage_();
+    }
     if (!this.hitDetectionImage_) {
       if (this.isTainted_()) {
         const width = this.size_[0];
@@ -199,19 +217,24 @@ class IconImage extends EventTarget {
    * Load not yet loaded URI.
    */
   load() {
-    if (this.imageState_ == ImageState.IDLE) {
-      this.imageState_ = ImageState.LOADING;
-      try {
-        /** @type {HTMLImageElement} */ (this.image_).src = this.src_;
-      } catch (e) {
-        this.handleImageError_();
-      }
-      this.unlisten_ = listenImage(
-        this.image_,
-        this.handleImageLoad_.bind(this),
-        this.handleImageError_.bind(this)
-      );
+    if (this.imageState_ !== ImageState.IDLE) {
+      return;
     }
+    if (!this.image_) {
+      this.initializeImage_();
+    }
+
+    this.imageState_ = ImageState.LOADING;
+    try {
+      /** @type {HTMLImageElement} */ (this.image_).src = this.src_;
+    } catch (e) {
+      this.handleImageError_();
+    }
+    this.unlisten_ = listenImage(
+      this.image_,
+      this.handleImageLoad_.bind(this),
+      this.handleImageError_.bind(this)
+    );
   }
 
   /**