diff --git a/lib/OpenLayers/Tile/Image.js b/lib/OpenLayers/Tile/Image.js index 8d2fa84f47..774aa52d53 100644 --- a/lib/OpenLayers/Tile/Image.js +++ b/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; +}()); + diff --git a/lib/OpenLayers/Tile/Image/IFrame.js b/lib/OpenLayers/Tile/Image/IFrame.js index f3e408e78a..84dca466ce 100644 --- a/lib/OpenLayers/Tile/Image/IFrame.js +++ b/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); } diff --git a/tests/Layer/Grid.html b/tests/Layer/Grid.html index fdc3bf1c2a..26c4edccfa 100644 --- a/tests/Layer/Grid.html +++ b/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. diff --git a/tests/Tile/Image.html b/tests/Tile/Image.html index d2e48cc191..6cd2aacb87 100644 --- a/tests/Tile/Image.html +++ b/tests/Tile/Image.html @@ -2,7 +2,7 @@