Avoid busy-waiting while images load

This is to be in conformance with the work done with #184.

src/ol/renderer/canvas/canvasimagelayerrenderer.js

@@ -82,20 +82,13 @@ ol.renderer.canvas.ImageLayer.prototype.renderFrame =
     image = imageSource.getImage(
         frameState.extent, viewResolution);
     var imageState = image.getState();
-    var animate = false;
+    if (imageState == ol.ImageState.IDLE) {
-    if (imageState == ol.ImageState.ERROR) {
+      goog.events.listenOnce(image, goog.events.EventType.CHANGE,
-      // pass
+          this.handleImageChange, false, this);
-    } else if (imageState == ol.ImageState.IDLE) {
-      animate = true;
       image.load();
-    } else if (imageState == ol.ImageState.LOADING) {
-      animate = true;
     } else if (imageState == ol.ImageState.LOADED) {
       this.image_ = image;
     }
-    if (animate) {
-      frameState.animate = true;
-    }
   }
 
   if (!goog.isNull(this.image_)) {

src/ol/renderer/dom/domimagelayerrenderer.js

@@ -69,20 +69,13 @@ ol.renderer.dom.ImageLayer.prototype.renderFrame =
   if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.PANNING]) {
     var image_ = imageSource.getImage(frameState.extent, viewResolution);
     var imageState = image_.getState();
-    var animate = false;
+    if (imageState == ol.ImageState.IDLE) {
-    if (imageState == ol.ImageState.ERROR) {
+      goog.events.listenOnce(image_, goog.events.EventType.CHANGE,
-      // pass
+          this.handleImageChange, false, this);
-    } else if (imageState == ol.ImageState.IDLE) {
-      animate = true;
       image_.load();
-    } else if (imageState == ol.ImageState.LOADING) {
-      animate = true;
     } else if (imageState == ol.ImageState.LOADED) {
       image = image_;
     }
-    if (animate) {
-      frameState.animate = true;
-    }
   }
 
   if (!goog.isNull(image)) {

src/ol/renderer/layerrenderer.js

@@ -3,6 +3,8 @@ goog.provide('ol.renderer.Layer');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.FrameState');
+goog.require('ol.Image');
+goog.require('ol.ImageState');
 goog.require('ol.Object');
 goog.require('ol.Tile');
 goog.require('ol.TileCoord');
@@ -119,6 +121,19 @@ ol.renderer.Layer.prototype.handleLayerContrastChange = goog.nullFunction;
 ol.renderer.Layer.prototype.handleLayerHueChange = goog.nullFunction;
 
 
+/**
+ * Handle changes in image state.
+ * @param {goog.events.Event} event Image change event.
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleImageChange = function(event) {
+  var image = /** @type {ol.Image} */ (event.target);
+  if (image.getState() === ol.ImageState.LOADED) {
+    this.getMap().requestRenderFrame();
+  }
+};
+
+
 /**
  * @protected
  */

src/ol/renderer/webgl/webglimagelayerrenderer.js

@@ -160,14 +160,10 @@ ol.renderer.webgl.ImageLayer.prototype.renderFrame =
   if (!hints[ol.ViewHint.ANIMATING] && !hints[ol.ViewHint.PANNING]) {
     var image_ = imageSource.getImage(frameState.extent, viewResolution);
     var imageState = image_.getState();
-    var animate = false;
+    if (imageState == ol.ImageState.IDLE) {
-    if (imageState == ol.ImageState.ERROR) {
+      goog.events.listenOnce(image_, goog.events.EventType.CHANGE,
-      // pass
+          this.handleImageChange, false, this);
-    } else if (imageState == ol.ImageState.IDLE) {
-      animate = true;
       image_.load();
-    } else if (imageState == ol.ImageState.LOADING) {
-      animate = true;
     } else if (imageState == ol.ImageState.LOADED) {
       image = image_;
       texture = this.createTexture_(image_);
@@ -180,9 +176,6 @@ ol.renderer.webgl.ImageLayer.prototype.renderFrame =
             }, gl, this.texture_));
       }
     }
-    if (animate) {
-      frameState.animate = true;
-    }
   }
 
   if (!goog.isNull(image)) {