a bit more code, but this finally fixed the loading image placeholder issue in FF (see #3419)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@12247 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Tile/Image.js

@@ -58,6 +58,14 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
      */
     asyncRequestId: null,
     
+    /**
+     * Property: blankImageUrl
+     * {String} Using a data scheme url is not supported by all browsers, but
+     * we don't care because we either set it as css backgroundImage, or the
+     * image's display style is set to "none" when we use it.
+     */
+    blankImageUrl: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAQAIBRAA7",
+
     /**
      * APIProperty: maxGetUrlLength
      * {Number} If set, requests that would result in GET urls with more
@@ -255,14 +263,32 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
         if (this.url && img.getAttribute("src") == this.url) {
             this.onImageLoad();
         } else {
-            OpenLayers.Event.observe(
+            // We need to start with a blank image, to make sure that no
-                img, "load", OpenLayers.Function.bind(this.onImageLoad, this)
+            // loading image placeholder and no old image is displayed when we
-            );
+            // set the display style to "" in onImageLoad, which is called
-            OpenLayers.Event.observe(
+            // after the image is loaded, but before it is rendered. So we set
-                img, "error", OpenLayers.Function.bind(this.onImageError, this)
+            // a blank image with a data scheme URI, and register for the load
-            );
+            // event (for browsers that support data scheme) and the error
-            this.imageReloadAttempts = 0;
+            // event (for browsers that don't). In the event handler, we set
-            this.setImgSrc(this.url);
+            // the final src.
+            var load = OpenLayers.Function.bind(function() {
+                OpenLayers.Event.stopObservingElement(img);
+                OpenLayers.Event.observe(img, "load",
+                    OpenLayers.Function.bind(this.onImageLoad, this)
+                );
+                OpenLayers.Event.observe(img, "error",
+                    OpenLayers.Function.bind(this.onImageError, this)
+                );
+                this.imageReloadAttempts = 0;
+                this.setImgSrc(this.url);
+            }, this);
+            if (img.getAttribute("src") == this.blankImageUrl) {
+                load();
+            } else {
+                OpenLayers.Event.observe(img, "load", load);
+                OpenLayers.Event.observe(img, "error", load);
+                img.src = this.blankImageUrl;
+            }
         }
     },
     
@@ -274,9 +300,10 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
      * url - {String} or undefined to hide the image
      */
     setImgSrc: function(url) {
-        this.imgDiv.style.display = "none";
+        var img = this.imgDiv;
+        img.style.display = "none";
         if (url) {
-            this.imgDiv.src = url;
+            img.src = url;
         }
     },
     

lib/OpenLayers/Tile/Image/IFrame.js

@@ -28,14 +28,6 @@ OpenLayers.Tile.Image.IFrame = {
      */ 
     useIFrame: null,
 
-    /**
-     * Property: blankImageUrl
-     * {String} This is only used as background image for the eventPane, so we
-     * don't care that this doesn't actually result in a blank image on all
-     * browsers
-     */
-    blankImageUrl: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAQAIBRAA7",
-
     /**
     * Method: updateBackBuffer
     * Update the <backBufferData>, and return a new or reposition the