Factor out icon image loading code

src/ol/render/vector.js

@@ -10,6 +10,7 @@ goog.require('ol.geom.MultiPolygon');
 goog.require('ol.geom.Point');
 goog.require('ol.geom.Polygon');
 goog.require('ol.render.IReplayGroup');
+goog.require('ol.style.ImageState');
 goog.require('ol.style.Style');
 
 
@@ -47,8 +48,51 @@ ol.renderer.vector.renderCircleGeometry_ =
  * @param {ol.style.Style} style Style.
  * @param {number} squaredTolerance Squared tolerance.
  * @param {Object} data Opaque data object.
+ * @param {function(this: T, goog.events.Event)} listener Listener function.
+ * @param {T} thisArg Value to use as `this` when executing `listener`.
+ * @return {boolean} `true` if style is loading.
+ * @template T
  */
 ol.renderer.vector.renderFeature = function(
+    replayGroup, feature, style, squaredTolerance, data, listener, thisArg) {
+  var loading = false;
+  var imageStyle, imageState;
+  imageStyle = style.getImage();
+  if (goog.isNull(imageStyle)) {
+    ol.renderer.vector.renderFeature_(
+        replayGroup, feature, style, squaredTolerance, data);
+  } else {
+    imageState = imageStyle.getImageState();
+    if (imageState == ol.style.ImageState.LOADED ||
+        imageState == ol.style.ImageState.ERROR) {
+      imageStyle.unlistenImageChange(listener, thisArg);
+      if (imageState == ol.style.ImageState.LOADED) {
+        ol.renderer.vector.renderFeature_(
+            replayGroup, feature, style, squaredTolerance, data);
+      }
+    } else {
+      if (imageState == ol.style.ImageState.IDLE) {
+        imageStyle.load();
+      }
+      imageState = imageStyle.getImageState();
+      goog.asserts.assert(imageState == ol.style.ImageState.LOADING);
+      imageStyle.listenImageChange(listener, thisArg);
+      loading = true;
+    }
+  }
+  return loading;
+};
+
+
+/**
+ * @param {ol.render.IReplayGroup} replayGroup Replay group.
+ * @param {ol.Feature} feature Feature.
+ * @param {ol.style.Style} style Style.
+ * @param {number} squaredTolerance Squared tolerance.
+ * @param {Object} data Opaque data object.
+ * @private
+ */
+ol.renderer.vector.renderFeature_ = function(
     replayGroup, feature, style, squaredTolerance, data) {
   var geometry = feature.getGeometry();
   if (goog.isNull(geometry)) {

src/ol/renderer/canvas/canvasvectorlayerrenderer.js

@@ -11,7 +11,6 @@ goog.require('ol.render.canvas.ReplayGroup');
 goog.require('ol.renderer.canvas.Layer');
 goog.require('ol.renderer.vector');
 goog.require('ol.source.Vector');
-goog.require('ol.style.ImageState');
 
 
 
@@ -245,7 +244,6 @@ ol.renderer.canvas.VectorLayer.prototype.prepareFrame =
  */
 ol.renderer.canvas.VectorLayer.prototype.renderFeature =
     function(feature, resolution, pixelRatio, styleFunction, replayGroup) {
-  var loading = false;
   var styles = styleFunction(feature, resolution);
   // FIXME if styles is null, should we use the default style?
   if (!goog.isDefAndNotNull(styles)) {
@@ -254,32 +252,11 @@ ol.renderer.canvas.VectorLayer.prototype.renderFeature =
   // simplify to a tolerance of half a device pixel
   var squaredTolerance =
       resolution * resolution / (4 * pixelRatio * pixelRatio);
-  var i, ii, style, imageStyle, imageState;
+  var i, ii, loading = false;
   for (i = 0, ii = styles.length; i < ii; ++i) {
-    style = styles[i];
+    loading = ol.renderer.vector.renderFeature(
-    imageStyle = style.getImage();
+        replayGroup, feature, styles[i], squaredTolerance, feature,
-    if (goog.isNull(imageStyle)) {
+        this.handleImageChange_, this) || loading;
-      ol.renderer.vector.renderFeature(
-          replayGroup, feature, style, squaredTolerance, feature);
-    } else {
-      imageState = imageStyle.getImageState();
-      if (imageState == ol.style.ImageState.LOADED ||
-          imageState == ol.style.ImageState.ERROR) {
-        imageStyle.unlistenImageChange(this.handleImageChange_, this);
-        if (imageState == ol.style.ImageState.LOADED) {
-          ol.renderer.vector.renderFeature(
-              replayGroup, feature, style, squaredTolerance, feature);
-        }
-      } else {
-        if (imageState == ol.style.ImageState.IDLE) {
-          imageStyle.load();
-        }
-        imageState = imageStyle.getImageState();
-        goog.asserts.assert(imageState == ol.style.ImageState.LOADING);
-        imageStyle.listenImageChange(this.handleImageChange_, this);
-        loading = true;
-      }
-    }
   }
   return loading;
 };

src/ol/source/imagevectorsource.js

@@ -12,7 +12,6 @@ goog.require('ol.render.canvas.ReplayGroup');
 goog.require('ol.renderer.vector');
 goog.require('ol.source.ImageCanvas');
 goog.require('ol.source.Vector');
-goog.require('ol.style.ImageState');
 goog.require('ol.vec.Mat4');
 
 
@@ -220,7 +219,6 @@ ol.source.ImageVector.prototype.handleSourceChange_ = function() {
  */
 ol.source.ImageVector.prototype.renderFeature_ =
     function(feature, resolution, pixelRatio, replayGroup) {
-  var loading = false;
   var styles = this.styleFunction_(feature, resolution);
   if (!goog.isDefAndNotNull(styles)) {
     return false;
@@ -228,32 +226,11 @@ ol.source.ImageVector.prototype.renderFeature_ =
   // simplify to a tolerance of half a device pixel
   var squaredTolerance =
       resolution * resolution / (4 * pixelRatio * pixelRatio);
-  var i, ii, style, imageStyle, imageState;
+  var i, ii, loading = false;
   for (i = 0, ii = styles.length; i < ii; ++i) {
-    style = styles[i];
+    loading = ol.renderer.vector.renderFeature(
-    imageStyle = style.getImage();
+        replayGroup, feature, styles[i], squaredTolerance, feature,
-    if (goog.isNull(imageStyle)) {
+        this.handleImageChange_, this) || loading;
-      ol.renderer.vector.renderFeature(
-          replayGroup, feature, style, squaredTolerance, feature);
-    } else {
-      imageState = imageStyle.getImageState();
-      if (imageState == ol.style.ImageState.LOADED ||
-          imageState == ol.style.ImageState.ERROR) {
-        imageStyle.unlistenImageChange(this.handleImageChange_, this);
-        if (imageState == ol.style.ImageState.LOADED) {
-          ol.renderer.vector.renderFeature(
-              replayGroup, feature, style, squaredTolerance, feature);
-        }
-      } else {
-        if (imageState == ol.style.ImageState.IDLE) {
-          imageStyle.load();
-        }
-        imageState = imageStyle.getImageState();
-        goog.asserts.assert(imageState == ol.style.ImageState.LOADING);
-        imageStyle.listenImageChange(this.handleImageChange_, this);
-        loading = true;
-      }
-    }
   }
   return loading;
 };