Added loader on SVG.Image and included svg.pattern.js to the core

1 files changed, 34 insertions, 3 deletions

diff --git a/src/image.js b/src/image.js
index 24333c7..60d57b1 100755
--- a/src/image.js
+++ b/src/image.js
@@ -9,7 +9,39 @@ SVG.Image = SVG.invent({
 , extend: {
     // (re)load image
     load: function(url) {
-      return (url ? this.attr('href', (this.src = url), SVG.xlink) : this)
+      if (!url) return this
+
+      var self = this
+        , img  = document.createElement('img')
+      
+      /* preload image */
+      img.onload = function() {
+        var p = self.doc(SVG.Pattern)
+
+        /* ensure image size */
+        if (self.width() == 0 && self.height() == 0)
+          self.size(img.width, img.height)
+
+        /* ensure pattern size if not set */
+        if (p && p.width() == 0 && p.height() == 0)
+          p.size(self.width(), self.height())
+        
+        /* callback */
+        if (typeof self._loaded == 'function')
+          self._loaded.call(self, {
+            width:  img.width
+          , height: img.height
+          , ratio:  img.width / img.height
+          , url:    url
+          })
+      }
+
+      return this.attr('href', (img.src = this.src = url), SVG.xlink)
+    }
+    // Add loade callback
+  , loaded: function(loaded) {
+      this._loaded = loaded
+      return this
     }
   }
   
@@ -17,8 +49,7 @@ SVG.Image = SVG.invent({
 , construct: {
     // Create image element, load image and set its size
     image: function(source, width, height) {
-      width = width != null ? width : 100
-      return this.put(new SVG.Image().load(source).size(width, height != null ? height : width))
+      return this.put(new SVG.Image).load(source).size(width || 0, height || width || 0)
     }
   }
 })
\ No newline at end of file