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

Merge pull request #705 from ahocevar/animation

Browse Source 
Remove complexity from the image loading sequence. r=@elemoine,@tschaub
This commit is contained in:
ahocevar
2012-11-05 10:33:59 -08:00
parent b45f903198 5a3bcc716b
commit a54ecca32b
5 changed files with 38 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}());