Merge pull request #705 from ahocevar/animation

Remove complexity from the image loading sequence. r=@elemoine,@tschaub

lib/OpenLayers/Tile/Image.js

@@ -60,14 +60,6 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      */
     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
@@ -232,7 +224,6 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
         OpenLayers.Tile.prototype.clear.apply(this, arguments);
         var img = this.imgDiv;
         if (img) {
-            OpenLayers.Event.stopObservingElement(img);
             var tile = this.getTile();
             if (tile.parentNode === this.layer.div) {
                 this.layer.div.removeChild(tile);
@@ -252,11 +243,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      */
     getImage: function() {
         if (!this.imgDiv) {
-            this.imgDiv = document.createElement("img");
-
-            this.imgDiv.className = "olTileImage";
-            // avoid image gallery menu in IE6
-            this.imgDiv.galleryImg = "no";
+            this.imgDiv = OpenLayers.Tile.Image.IMAGE.cloneNode(false);
 
             var style = this.imgDiv.style;
             if (this.frame) {
@@ -302,36 +289,18 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
         if (this.url && img.getAttribute("src") == this.url) {
             this.onImageLoad();
         } else {
-            // 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.stopObservingElement(img);
-                OpenLayers.Event.observe(img, "load", load);
-                OpenLayers.Event.observe(img, "error", load);
-                if (this.crossOriginKeyword) {
-                    img.removeAttribute("crossorigin");
-                }
-                img.src = this.blankImageUrl;
+            OpenLayers.Event.stopObservingElement(img);
+            if (this.crossOriginKeyword) {
+                img.removeAttribute("crossorigin");
             }
+            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);
         }
     },
     
@@ -359,6 +328,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
         } else {
             // Remove reference to the image, and leave it to the browser's
             // caching and garbage collection.
+            OpenLayers.Event.stopObservingElement(this.imgDiv);
             this.imgDiv = null;
             if (img.parentNode) {
                 img.parentNode.removeChild(img);
@@ -409,13 +379,11 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
     onImageLoad: function() {
         var img = this.imgDiv;
         OpenLayers.Event.stopObservingElement(img);
-
         img.style.visibility = 'inherit';
         img.style.opacity = this.layer.opacity;
-
+        this.events.triggerEvent("loadend");
         this.isLoading = false;
         this.canvasContext = null;
-        this.events.triggerEvent("loadend");
 
         if (this.layerAlphaHack === true) {
             img.style.filter =
@@ -477,3 +445,16 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
     CLASS_NAME: "OpenLayers.Tile.Image"
 
 });
+
+/** 
+ * Constant: OpenLayers.Tile.Image.IMAGE
+ * {HTMLImageElement} The image for a tile.
+ */
+OpenLayers.Tile.Image.IMAGE = (function() {
+    var img = new Image();
+    img.className = "olTileImage";
+    // avoid image gallery menu in IE6
+    img.galleryImg = "no";
+    return img;
+}());
+

lib/OpenLayers/Tile/Image/IFrame.js

@@ -25,6 +25,14 @@ OpenLayers.Tile.Image.IFrame = {
      */ 
     useIFrame: 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",
+
     /**
      * Method: draw
      * Set useIFrame in the instance, and operate the image/iframe switch.
@@ -65,11 +73,7 @@ OpenLayers.Tile.Image.IFrame = {
                 // And if we had an iframe we also remove the event pane.
 
                 if(fromIFrame) {
-                    this.blankImageUrl = this._blankImageUrl;
                     this.frame.removeChild(this.frame.firstChild);
-                } else {
-                    this._blankImageUrl = this.blankImageUrl;
-                    this.blankImageUrl = "about:blank";
                 }
             }
         }
@@ -89,7 +93,7 @@ OpenLayers.Tile.Image.IFrame = {
                 style.width = "100%";
                 style.height = "100%";
                 style.zIndex = 1;
-                style.backgroundImage = "url(" + this._blankImageUrl + ")";
+                style.backgroundImage = "url(" + this.blankImageUrl + ")";
                 this.frame.appendChild(eventPane);
             }
 

tests/Layer/Grid.html

@@ -770,7 +770,6 @@
     }
 
     function test_setOpacity(t) {
-
         t.plan(5);
 
         var map = new OpenLayers.Map('map');
@@ -1309,7 +1308,6 @@
     }
 
     function test_delayed_back_buffer_removal(t) {
-
         //
         // Test that the delaying of the back buffer removal behaves
         // as expected.

tests/Tile/Image.html

@@ -2,7 +2,7 @@
 <head>
   <script src="../OLLoader.js"></script>
   <script type="text/javascript">
-    // turn off animation frame handling, so we can check img urls in tests
+    // turn off tile queue, so we can check img urls in tests
     delete OpenLayers.Layer.Grid.prototype.queueTileDraw;
 
     var isMozilla = (navigator.userAgent.indexOf("compatible") == -1);

tests/Tile/Image/IFrame.html

@@ -96,7 +96,7 @@
         var eventPane = tile.frame.childNodes[0];
 
         t.ok(OpenLayers.String.contains(eventPane.style.backgroundImage,
-                    tile._blankImageUrl),
+                    tile.blankImageUrl),
              "backgroundImage of eventPane is set.");
         t.eq(parseInt(eventPane.style.zIndex, 10), 1, "zIndex of eventPane is set.");
         if(isIElt9) {