Don't repeatedly render while waiting for tiles to load

Instead of going into an unnecessary animation loop, we can simply wait to be notified when tiles load.

The WebGL renderer still sets frameState.animate true, but I think this too should be unnecessary (full page example works without it, side-by-side example shows it cannot yet be removed).

src/ol/renderer/canvas/canvastilelayerrenderer.js

@@ -167,6 +167,8 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
 
       tileState = tile.getState();
       if (tileState == ol.TileState.IDLE) {
+        goog.events.listen(tile, goog.events.EventType.CHANGE,
+            this.handleTileChange, false, this);
         this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
         tileCenter = tileGrid.getTileCoordCenter(tileCoord);
         frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);
@@ -215,10 +217,6 @@ ol.renderer.canvas.TileLayer.prototype.renderFrame =
     }
   }
 
-  if (!allTilesLoaded) {
-    frameState.animate = true;
-  }
-
   this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
   this.scheduleExpireCache(frameState, tileSource);
 

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -131,6 +131,8 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
 
       tileState = tile.getState();
       if (tileState == ol.TileState.IDLE) {
+        goog.events.listen(tile, goog.events.EventType.CHANGE,
+            this.handleTileChange, false, this);
         this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
         tileCenter = tileGrid.getTileCoordCenter(tileCoord);
         frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);
@@ -233,10 +235,6 @@ ol.renderer.dom.TileLayer.prototype.renderFrame =
     this.renderedVisible_ = true;
   }
 
-  if (!allTilesLoaded) {
-    frameState.animate = true;
-  }
-
   this.updateUsedTiles(frameState.usedTiles, tileSource, z, tileRange);
   this.scheduleExpireCache(frameState, tileSource);
 

src/ol/renderer/layerrenderer.js

@@ -4,8 +4,10 @@ goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.FrameState');
 goog.require('ol.Object');
+goog.require('ol.Tile');
 goog.require('ol.TileCoord');
 goog.require('ol.TileRange');
+goog.require('ol.TileState');
 goog.require('ol.layer.Layer');
 goog.require('ol.layer.LayerProperty');
 goog.require('ol.layer.LayerState');
@@ -147,6 +149,19 @@ ol.renderer.Layer.prototype.handleLayerVisibleChange = function() {
 };
 
 
+/**
+ * Handle changes in tile state.
+ * @param {goog.events.Event} event Tile change event.
+ * @protected
+ */
+ol.renderer.Layer.prototype.handleTileChange = function(event) {
+  var tile = /** @type {ol.Tile} */ (event.target);
+  if (tile.getState() === ol.TileState.LOADED) {
+    this.getMap().requestRenderFrame();
+  }
+};
+
+
 /**
  * @param {ol.FrameState} frameState Frame state.
  * @param {ol.layer.LayerState} layerState Layer state.

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -393,6 +393,8 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame =
 
         tileState = tile.getState();
         if (tileState == ol.TileState.IDLE) {
+          goog.events.listen(tile, goog.events.EventType.CHANGE,
+              this.handleTileChange, false, this);
           this.updateWantedTiles(frameState.wantedTiles, tileSource, tileCoord);
           tileCenter = tileGrid.getTileCoordCenter(tileCoord);
           frameState.tileQueue.enqueue(tile, tileSourceKey, tileCenter);