Revert "No backbuffer removal delay needed with 3d enabled"

This reverts commit 7e8271525ed52288092a135b1c65eed4849c8e49.

lib/OpenLayers/Layer/Grid.js

@@ -190,15 +190,22 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
     backBufferLonLat: null,
 
     /**
-     * APIProperty: removeBackBufferDelay
+     * Property: backBufferTimerId
-     * {Number} Delay in ms for removing the backbuffer when all tiles have
+     * {Number} The id of the back buffer timer. This timer is used to
-     *     finished loading.  Usually a value of 0 works fine.  For slow mobile
+     *     delay the removal of the back buffer, thereby preventing
-     *     devices, when using <singleTile> layers with big image sizes, a delay
+     *     flash effects caused by tile animation.
-     *     of 40-50ms may help to avoid flickers after panning.  Default is 0.
-     *     If set, the layer's loadend event will also be delayed when a
-     *     backbuffer needs to be removed.
      */
-    removeBackBufferDelay: 0,
+    backBufferTimerId: null,
+
+    /**
+     * APIProperty: removeBackBufferDelay
+     * {Number} Delay for removing the backbuffer when all tiles have finished
+     *     loading. Can be set to 0 when no css opacity transitions for the
+     *     olTileImage class are used. Default is 0 for <singleTile> layers,
+     *     2500 for tiled layers. See <className> for more information on
+     *     tile animation.
+     */
+    removeBackBufferDelay: null,
 
     /**
      * APIProperty: className
@@ -229,6 +236,8 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      *     transition: opacity 0.2s linear;
      * }
      * (end)
+     * In that case, to avoid flash effects, <removeBackBufferDelay>
+     *     should not be zero.
      */
     className: null,
 
@@ -302,6 +311,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         this.tileQueue = [];
         this._removeBackBuffer = OpenLayers.Function.bind(this.removeBackBuffer, this);
 
+        if (this.removeBackBufferDelay === null) {
+            this.removeBackBufferDelay = this.singleTile ? 0 : 2500;
+        }
+        
         if (this.className === null) {
             this.className = this.singleTile ? 'olLayerGridSingleTile' :
                                                'olLayerGrid';
@@ -341,6 +354,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             this.moveTimerId = null;
         }
         this.clearTileQueue();
+        if(this.backBufferTimerId !== null) {
+            window.clearTimeout(this.backBufferTimerId);
+            this.backBufferTimerId = null;
+        }
     },
 
     /**
@@ -409,6 +426,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         obj.gridResolution = null;
         // same for backbuffer and tile queue
         obj.backBuffer = null;
+        obj.backBufferTimerId = null;
         obj.tileQueue = [];
         obj.tileQueueId = null;
         obj.loading = false;
@@ -668,6 +686,9 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * resolution - {Number} The resolution to transition to.
      */
     applyBackBuffer: function(resolution) {
+        if(this.backBufferTimerId !== null) {
+            this.removeBackBuffer();
+        }
         var backBuffer = this.backBuffer;
         if(!backBuffer) {
             backBuffer = this.createBackBuffer();
@@ -757,6 +778,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             this.div.removeChild(this.backBuffer);
             this.backBuffer = null;
             this.backBufferResolution = null;
+            if(this.backBufferTimerId !== null) {
+                window.clearTimeout(this.backBufferTimerId);
+                this.backBufferTimerId = null;
+            }
         }
     },
 
@@ -1109,14 +1134,15 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             });
             //if that was the last tile, then trigger a 'loadend' on the layer
             if (this.tileQueue.length === 0 && this.numLoadingTiles === 0) {
-                if (this.backBuffer) {
+                this.loading = false;
-                    var that = this;
+                this.events.triggerEvent("loadend");
-                    window.setTimeout(function() {
+                if(this.backBuffer) {
-                        that.onLoadEnd();
+                    // the removal of the back buffer is delayed to prevent flash
-                        that.removeBackBuffer();
+                    // effects due to the animation of tile displaying
-                    }, this.removeBackBufferDelay);
+                    this.backBufferTimerId = window.setTimeout(
-                } else {
+                        OpenLayers.Function.bind(this.removeBackBuffer, this),
-                    this.onLoadEnd();
+                        this.removeBackBufferDelay
+                    );
                 }
             }
         };