[OpenLayers-Commits] r12247 - in trunk/openlayers/lib/OpenLayers/Tile: . Image

[commits-20090109 at openlayers.org]

Author: ahocevar
Date: 2011-08-14 08:56:33 -0700 (Sun, 14 Aug 2011)
New Revision: 12247

Modified:
   trunk/openlayers/lib/OpenLayers/Tile/Image.js
   trunk/openlayers/lib/OpenLayers/Tile/Image/IFrame.js
Log:
a bit more code, but this finally fixed the loading image placeholder issue in FF (see #3419)

Modified: trunk/openlayers/lib/OpenLayers/Tile/Image/IFrame.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Tile/Image/IFrame.js	2011-08-14 15:12:59 UTC (rev 12246)
+++ trunk/openlayers/lib/OpenLayers/Tile/Image/IFrame.js	2011-08-14 15:56:33 UTC (rev 12247)
@@ -29,14 +29,6 @@
     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
     * backBuffer. When a backbuffer is returned, the tile's markup is not

Modified: trunk/openlayers/lib/OpenLayers/Tile/Image.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Tile/Image.js	2011-08-14 15:12:59 UTC (rev 12246)
+++ trunk/openlayers/lib/OpenLayers/Tile/Image.js	2011-08-14 15:56:33 UTC (rev 12247)
@@ -59,6 +59,14 @@
     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
      * characters than the number provided will be made using form-encoded
@@ -255,14 +263,32 @@
         if (this.url && img.getAttribute("src") == this.url) {
             this.onImageLoad();
         } else {
-            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);
+            // We need to start with a blank image, to make sure that no
+            // loading image placeholder and no old image is displayed when we
+            // set the display style to "" in onImageLoad, which is called
+            // after the image is loaded, but before it is rendered. So we set
+            // a blank image with a data scheme URI, and register for the load
+            // event (for browsers that support data scheme) and the error
+            // event (for browsers that don't). In the event handler, we set
+            // 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 @@
      * 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;
         }
     },