diff --git a/examples/Rasters/Raster.html b/examples/Rasters/Raster.html
index 323275b5..e147e315 100644
--- a/examples/Rasters/Raster.html
+++ b/examples/Rasters/Raster.html
@@ -19,7 +19,10 @@
var scale = (Math.sin(event.time * 2) + 1) / 2;
raster.scale(scale / lastScale);
lastScale = scale;
- raster.position = center + [Math.sin(event.time * 3) * 256, Math.sin(event.time * 2.5) * 256];
+ raster.position = center + [
+ Math.sin(event.time * 3) * 256,
+ Math.sin(event.time * 2.5) * 256
+ ];
raster.rotate(event.delta * 120);
}
diff --git a/src/event/Event.js b/src/event/Event.js
index d450221e..5fb04b10 100644
--- a/src/event/Event.js
+++ b/src/event/Event.js
@@ -22,6 +22,7 @@ var Event = Base.extend(/** @lends Event# */{
initialize: function Event(event) {
this.event = event;
+ this.type = event.type;
},
prevented: false,
diff --git a/src/item/Item.js b/src/item/Item.js
index 2cd4b28f..6cd0ee7b 100644
--- a/src/item/Item.js
+++ b/src/item/Item.js
@@ -145,7 +145,8 @@ var Item = Base.extend(Emitter, /** @lends Item# */{
},
// Only for external sources, e.g. Raster
- onLoad: {}
+ onLoad: {},
+ onError: {}
}
),
diff --git a/src/item/Raster.js b/src/item/Raster.js
index 71beaf8c..2456fb38 100644
--- a/src/item/Raster.js
+++ b/src/item/Raster.js
@@ -221,6 +221,33 @@ var Raster = Item.extend(/** @lends Raster# */{
},
setImage: function(image) {
+ var that = this,
+ loaded = false;
+
+ function emit(event) {
+ var view = that.getView(),
+ type = event && event.type || 'load';
+ if (view && that.responds(type)) {
+ paper = view._scope;
+ that.emit(type, new Event(event));
+ // TODO: Request a redraw in the next animation frame from
+ // update() instead!
+ view.update();
+ }
+ }
+
+ function update() {
+ // Both canvas and image have width / height attributes. Due to IE,
+ // naturalWidth / Height needs to be checked for a swell, because it
+ // apparently can have width / height set to 0 when the image is
+ // invisible in the document.
+ that._size = new Size(
+ image ? image.naturalWidth || image.width : 0,
+ image ? image.naturalHeight || image.height : 0);
+ that._context = null;
+ that._changed(/*#=*/(Change.GEOMETRY | Change.PIXELS));
+ }
+
if (this._canvas)
CanvasProvider.release(this._canvas);
// Due to similarities, we can handle both canvas and image types here.
@@ -228,22 +255,30 @@ var Raster = Item.extend(/** @lends Raster# */{
// A canvas object
this._image = null;
this._canvas = image;
- this._loaded = true;
+ loaded = true;
} else {
// A image object
this._image = image;
this._canvas = null;
- this._loaded = image && image.complete;
+ loaded = image && image.complete;
+ }
+ this._loaded = loaded;
+ if (loaded) {
+ // Emit load event with a delay, so behavior is the same as when
+ // it's actually loaded and we give the code time to install event.
+ update();
+ setTimeout(emit, 0);
+ } else if (image) {
+ // Trigger the load event on the image once it's loaded
+ DomEvent.add(image, {
+ load: function(event) {
+ that._loaded = true;
+ update();
+ emit(event);
+ },
+ error: emit
+ });
}
- // Both canvas and image have width / height attributes. Due to IE,
- // naturalWidth / Height needs to be checked for a swell, because it
- // apparently can have width / height set to 0 when the image is
- // invisible in the document.
- this._size = new Size(
- image ? image.naturalWidth || image.width : 0,
- image ? image.naturalHeight || image.height : 0);
- this._context = null;
- this._changed(/*#=*/(Change.GEOMETRY | Change.PIXELS));
},
/**
@@ -328,35 +363,14 @@ var Raster = Item.extend(/** @lends Raster# */{
},
setSource: function(src) {
- var that = this,
- crossOrigin = this._crossOrigin,
- image;
-
- function loaded() {
- var view = that.getView();
- if (view) {
- paper = view._scope;
- that.setImage(image);
- that.emit('load');
- view.update();
- }
- }
-
- // src can be an URL or a DOM ID to load the image from
- image = document.getElementById(src) || new window.Image();
+ var crossOrigin = this._crossOrigin,
+ // src can be an URL or a DOM ID to load the image from:
+ image = document.getElementById(src) || new window.Image();
if (crossOrigin)
image.crossOrigin = crossOrigin;
- if (image.complete) {
- // Emit load event with a delay, so behavior is the same as when
- // it's actually loaded and we give the code time to install event.
- setTimeout(loaded, 0);
- } else {
- // Trigger the load event on the image once it's loaded
- DomEvent.add(image, { load: loaded });
- // A new image created above? Set the source now.
- if (!image.src)
- image.src = src;
- }
+ // A new image created above? Set the source now.
+ if (!image.src)
+ image.src = src;
this.setImage(image);
},