ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

a bit more code, but this finally fixed the loading image placeholder issue in FF (see #3419)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12247 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-08-14 15:56:33 +00:00
parent fdd5e8cb06
commit 652f2729cd
2 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
lib/OpenLayers/Tile/Image.js
View File

@@ -58,6 +58,14 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
*/
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
@@ -255,14 +263,32 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
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 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
* 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;
}
},

8
lib/OpenLayers/Tile/Image/IFrame.js
View File

@@ -28,14 +28,6 @@ OpenLayers.Tile.Image.IFrame = {
*/
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