Merge pull request #297 from ahocevar/tileloadstart

tileloadstart event and fixed crossorigin handling. r=@fredj

lib/OpenLayers/Layer/Grid.js

@@ -196,6 +196,9 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      * element - {DOMElement} A reference to layer.events.element.
      *
      * Supported event types:
+     * tileloadstart - Triggered when a tile starts loading. Listeners receive
+     *     an object as first argument, which has a tile property that
+     *     references the tile that starts loading.
      * tileloaded - Triggered when each new tile is
      *     loaded, as a means of progress update to listeners.
      *     listeners can access 'numLoadingTiles' if they wish to keep
@@ -971,6 +974,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             if (this.numLoadingTiles == 0) {
                 this.events.triggerEvent("loadstart");
             }
+            this.events.triggerEvent("tileloadstart", {tile: tile});
             this.numLoadingTiles++;
         };
       

lib/OpenLayers/Tile/Image.js

@@ -21,9 +21,9 @@
 OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
 
     /** 
-     * Property: url
+     * APIProperty: url
      * {String} The URL of the image being requested. No default. Filled in by
-     * layer.getURL() function. 
+     * layer.getURL() function. May be modified by loadstart listeners.
      */
     url: null,
     
@@ -166,10 +166,10 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
             }
             if (this.isLoading) {
                 //if we're already loading, send 'reload' instead of 'loadstart'.
-                this.events.triggerEvent("reload"); 
+                this._loadEvent = "reload"; 
             } else {
                 this.isLoading = true;
-                this.events.triggerEvent("loadstart");
+                this._loadEvent = "loadstart";
             }
             this.positionTile();
             this.renderTile();
@@ -287,6 +287,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      * Creates the content for the frame on the tile.
      */
     initImage: function() {
+        this.events.triggerEvent(this._loadEvent);
         var img = this.getImage();
         if (this.url && img.getAttribute("src") == this.url) {
             this.onImageLoad();
@@ -315,8 +316,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
             } else {
                 OpenLayers.Event.observe(img, "load", load);
                 OpenLayers.Event.observe(img, "error", load);
-                if (img.crossOrigin) {
+                if (this.crossOriginKeyword) {
-                    img.crossOrigin = null;
+                    img.removeAttribute("crossorigin");
                 }
                 img.src = this.blankImageUrl;
             }
@@ -336,8 +337,12 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
         img.style.opacity = 0;
         if (url) {
             // don't set crossOrigin if the url is a data URL
-            if (this.crossOriginKeyword && url.substr(0, 5 !== 'data:')) {
+            if (this.crossOriginKeyword) {
-                img.crossOrigin = this.crossOriginKeyword;
+                if (url.substr(0, 5) !== 'data:') {
+                    img.setAttribute("crossorigin", this.crossOriginKeyword);
+                } else {
+                    img.removeAttribute("crossorigin");
+                }
             }
             img.src = url;
         }

tests/Layer/Grid.html

@@ -506,7 +506,7 @@
     }  
      
     function test_Layer_Grid_addTileMonitoringHooks(t) {
-        t.plan(17);
+        t.plan(18);
         
         layer = new OpenLayers.Layer.Grid();
         layer.events = {
@@ -546,10 +546,11 @@
 
         t.eq(g_events[0][0], "loadstart", "loadstart event triggered when numLoadingTiles is 0");
         t.eq(layer.numLoadingTiles, 1, "numLoadingTiles incremented");
+        t.eq(g_events[1][0], "tileloadstart", "tileloadstart event triggered");
 
         g_events = [];
         tile.onLoadStart.apply(layer);
-        t.eq(g_events.length, 0, "loadstart event not triggered when numLoadingTiles is not 0");
+        t.eq(g_events.length, 1, "tileloadstart, but not loadstart triggered when numLoadingTiles is not 0");
         t.eq(layer.numLoadingTiles, 2, "numLoadingTiles incremented");