Changed natural option to method: 'naturalWidth'

This will allows for more loading methods to be supported in the future.
Supported methods right now are 'naturalWidth' (the default) and
'onload'

README.md

@@ -70,11 +70,11 @@ $('#container').voila()
 
 Options can be set as the first parameter.
 
-+ `natural` - _Boolean_ - Callbacks are called as soon as `naturalWidth/Height` are available when `true` (the default). Using `false` will call callbacks as soon as `onload` fires on a detached Image object, which is slower, but can give the image more time to render.
++ `method` - _String_ - The loading method, the default is `'naturalWidth'` which calls callbacks as soon as `naturalWidth` and `naturalHeight` are available. Images will have dimensions at that point, but could still be in the process of rendering. The alternative is `'onload'` which calls callbacks as soon as `onload` fires on a detached Image object, this is slower, but can give images more time to render.
 
 ```js
-// give images more time to render with natural:false
-$('#container').voila({ natural: false }, function(instance) {
+// give images more time to render by waiting for onload
+$('#container').voila({ method: 'onload' }, function(instance) {
   $.each(instance.images, function(i, image) {
     var img = image.img;
     console.log(img.src + ' = ' + img.naturalWidth + 'x' + img.naturalHeight);

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "voila",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A jQuery plugin that provides callbacks for images, letting you know when they've loaded.",
   "keywords": [
     "image",

demo/index.html

@@ -35,7 +35,7 @@ <h2>Demo</h2>
       <button id="reset">Reset</button>
     </div>
     <div class='checkboxes'>
-      <input type='checkbox' checked='checked' id='natural'/> <label for='natural'>Natural</label>
+      <input type='checkbox' id='onload'/> <label for='onload'>onload</label>
       <input type='checkbox' id='dimensions'/> <label for='dimensions'>Dimensions</label>
     </div>
   </div>

demo/js/demo.js

@@ -38,7 +38,7 @@ var Demo = {
 
     this.reset();
 
-    this.naturalChange();
+    this.onloadChange();
 
     this.startObserving();
   },
@@ -50,7 +50,7 @@ var Demo = {
   startObserving: function() {
     $('#add').on('click', $.proxy(this.add, this));
     $('#reset').on('click', $.proxy(this.reset, this));
-    $('#natural').on('change', $.proxy(this.naturalChange, this));
+    $('#onload').on('change', $.proxy(this.onloadChange, this));
   },
 
   add: function() {
@@ -107,9 +107,9 @@ var Demo = {
     }
   },
 
-  naturalChange: function() {
+  onloadChange: function() {
     this.setOptions({
-      natural: $('#natural').prop('checked')
+      method: $('#onload').prop('checked') ? 'onload' : 'naturalWidth'
     });
   }
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "voila",
   "title": "Voilà",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A jQuery plugin that provides callbacks for images, letting you know when they've loaded.",
   "keywords": [
     "image",

src/imageready.js

@@ -21,13 +21,13 @@ $.extend(ImageReady.prototype, {
     this.isLoaded = false;
 
     this.options = $.extend({
-      natural: true,
+      method: 'naturalWidth',
       pollFallbackAfter: 1000
     }, arguments[3] || {});
 
     // a fallback is used when we're not polling for naturalWidth/Height
     // IE6-7 also use this to add support for naturalWidth/Height
-    if (!this.supports.naturalWidth || !this.options.natural) {
+    if (!this.supports.naturalWidth || this.options.method == 'onload') {
       setTimeout($.proxy(this.fallback, this));
       return;
     }

src/voila.js

@@ -9,7 +9,7 @@ function Voila(elements, opts, cb) {
                    $.type(arguments[2]) === 'function' ? arguments[2] : false;
 
   this.options = $.extend({
-    natural: true
+    method: 'naturalWidth'
   }, options);
 
   this.deferred = new jQuery.Deferred();

voila.pkgd.js

@@ -1,5 +1,5 @@
 /*!
- * Voilà - v1.0.7
+ * Voilà - v1.1.0
  * (c) 2014 Nick Stakenburg
  *
  * http://voila.nickstakenburg.com
@@ -27,7 +27,7 @@ function Voila(elements, opts, cb) {
                    $.type(arguments[2]) === 'function' ? arguments[2] : false;
 
   this.options = $.extend({
-    natural: true
+    method: 'naturalWidth'
   }, options);
 
   this.deferred = new jQuery.Deferred();
@@ -166,13 +166,13 @@ $.extend(ImageReady.prototype, {
     this.isLoaded = false;
 
     this.options = $.extend({
-      natural: true,
+      method: 'naturalWidth',
       pollFallbackAfter: 1000
     }, arguments[3] || {});
 
     // a fallback is used when we're not polling for naturalWidth/Height
     // IE6-7 also use this to add support for naturalWidth/Height
-    if (!this.supports.naturalWidth || !this.options.natural) {
+    if (!this.supports.naturalWidth || this.options.method == 'onload') {
       setTimeout($.proxy(this.fallback, this));
       return;
     }