Triggering loadstart and loadend events for the Image layer. Thanks for the excellent patch sky. r=me (closes #1700)

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

examples/image-layer.html

@@ -8,6 +8,7 @@
             width: 512px;
         }
     </style>
+    <script src="../lib/Firebug/firebug.js"></script>
     <script src="../lib/OpenLayers.js"></script>
     <script type="text/javascript">
         var map;
@@ -17,11 +18,21 @@
             var options = {numZoomLevels: 3};
 
             var graphic = new OpenLayers.Layer.Image(
-                                'City Lights',
+                'City Lights',
-                                'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
+                'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
-                                new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
+                new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
-                                new OpenLayers.Size(580, 288),
+                new OpenLayers.Size(580, 288),
-                                options);
+                options
+            );
+            
+            graphic.events.on({
+                loadstart: function() {
+                    OpenLayers.Console.log("loadstart");
+                },
+                loadend: function() {
+                    OpenLayers.Console.log("loadend");
+                }
+            });
 
             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 

lib/OpenLayers/Layer/Image.js

@@ -84,6 +84,7 @@ OpenLayers.Layer.Image = OpenLayers.Class(OpenLayers.Layer, {
      */
     destroy: function() {
         if (this.tile) {
+            this.removeTileMonitoringHooks(this.tile);
             this.tile.destroy();
             this.tile = null;
         }
@@ -166,6 +167,7 @@ OpenLayers.Layer.Image = OpenLayers.Class(OpenLayers.Layer, {
                 //create the new tile
                 this.tile = new OpenLayers.Tile.Image(this, ulPx, this.extent, 
                                                       null, this.tileSize);
+                this.addTileMonitoringHooks(this.tile);
             } else {
                 //just resize the tile and set it's new position
                 this.tile.size = this.tileSize.clone();
@@ -184,6 +186,45 @@ OpenLayers.Layer.Image = OpenLayers.Class(OpenLayers.Layer, {
         this.tileSize = new OpenLayers.Size(tileWidth, tileHeight);
     },
 
+    /** 
+     * Method: addTileMonitoringHooks
+     * This function takes a tile as input and adds the appropriate hooks to 
+     *     the tile so that the layer can keep track of the loading tiles.
+     * 
+     * Parameters: 
+     * tile - {<OpenLayers.Tile>}
+     */
+    addTileMonitoringHooks: function(tile) {
+        tile.onLoadStart = function() {
+            this.events.triggerEvent("loadstart");
+        };
+        tile.events.register("loadstart", this, tile.onLoadStart);
+      
+        tile.onLoadEnd = function() {
+            this.events.triggerEvent("loadend");
+        };
+        tile.events.register("loadend", this, tile.onLoadEnd);
+        tile.events.register("unload", this, tile.onLoadEnd);
+    },
+
+    /** 
+     * Method: removeTileMonitoringHooks
+     * This function takes a tile as input and removes the tile hooks 
+     *     that were added in <addTileMonitoringHooks>.
+     * 
+     * Parameters: 
+     * tile - {<OpenLayers.Tile>}
+     */
+    removeTileMonitoringHooks: function(tile) {
+        tile.unload();
+        tile.events.un({
+            "loadstart": tile.onLoadStart,
+            "loadend": tile.onLoadEnd,
+            "unload": tile.onLoadEnd,
+            scope: this
+        });
+    },
+    
     /**
      * APIMethod: setUrl
      * 

tests/Layer/Image.html

@@ -125,6 +125,36 @@
 
     }
 
+    function test_loadEvents(t) {
+        t.plan(3);
+
+        var map = new OpenLayers.Map('map');    
+        var layer = new OpenLayers.Layer.Image(
+            'Test', '../../img/blank.gif',
+            new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
+            new OpenLayers.Size(580, 288)
+        );
+    
+        map.addLayer(layer);
+
+        layer.events.register('loadstart', null, function(obj) {
+            t.ok(obj.object.tile.isLoading, "loadstart triggered while tile is loading");
+        });
+
+        var delay = false;
+        layer.events.register('loadend', null, function(obj) {
+            delay = true;
+        });
+
+        t.delay_call(0.4,function() {
+            t.eq(delay, true, "registered for loadend");
+            t.eq(layer.tile.isLoading, false, "loadend triggered after tile is loaded");
+            map.destroy(); //tear down
+            return delay;
+        });
+        map.zoomToMaxExtent();
+    }
+
   </script>
 </head>
 <body>