diff --git a/README.md b/README.md
index 127a2c4..0b69e4c 100644
--- a/README.md
+++ b/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);
diff --git a/bower.json b/bower.json
index 79e2c92..aff06b7 100644
--- a/bower.json
+++ b/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",
diff --git a/demo/index.html b/demo/index.html
index 9d3f25f..6726254 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -35,7 +35,7 @@
Demo
-
+
diff --git a/demo/js/demo.js b/demo/js/demo.js
index 7aba275..407706b 100644
--- a/demo/js/demo.js
+++ b/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'
});
}
};
diff --git a/package.json b/package.json
index 7e8f8fa..97e79dc 100644
--- a/package.json
+++ b/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",
diff --git a/src/imageready.js b/src/imageready.js
index c6b2d6a..ecb5c4b 100644
--- a/src/imageready.js
+++ b/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;
}
diff --git a/src/voila.js b/src/voila.js
index 70a3186..19e0ed9 100644
--- a/src/voila.js
+++ b/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();
diff --git a/voila.pkgd.js b/voila.pkgd.js
index 50f31ab..18c7b28 100644
--- a/voila.pkgd.js
+++ b/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;
}
diff --git a/voila.pkgd.min.js b/voila.pkgd.min.js
index a4c41d1..b9b395d 100644
--- a/voila.pkgd.min.js
+++ b/voila.pkgd.min.js
@@ -1,9 +1,9 @@
/*!
- * Voilà - v1.0.7
+ * Voilà - v1.1.0
* (c) 2014 Nick Stakenburg
*
* http://voila.nickstakenburg.com
*
* MIT License
*/
-!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):jQuery&&!window.Voila&&(window.Voila=a(jQuery))}(function(a){function b(c,d,e){if(!(this instanceof b))return new b(c,d,e);var f=a.type(arguments[1]),g="object"===f?arguments[1]:{},h="function"===f?arguments[1]:"function"===a.type(arguments[2])?arguments[2]:!1;return this.options=a.extend({natural:!0},g),this.deferred=new jQuery.Deferred,h&&this.always(h),this._processed=0,this.images=[],this._add(c),this}a.extend(b.prototype,{_add:function(b){var d="string"==a.type(b)?a(b):b instanceof jQuery||b.length>0?b:[b];a.each(d,a.proxy(function(b,d){var e=a(),f=a(d);e=e.add(f.is("img")?f:f.find("img")),e.each(a.proxy(function(b,d){this.images.push(new c(d,a.proxy(function(a){this._progress(a)},this),a.proxy(function(a){this._progress(a)},this),this.options))},this))},this)),this.images.length<1&&setTimeout(a.proxy(function(){this._resolve()},this))},abort:function(){this._progress=this._notify=this._reject=this._resolve=function(){},a.each(this.images,function(a,b){b.abort()}),this.images=[]},_progress:function(a){this._processed++,a.isLoaded||(this._broken=!0),this._notify(a),this._processed==this.images.length&&this[this._broken?"_reject":"_resolve"]()},_notify:function(a){this.deferred.notify(this,a)},_reject:function(){this.deferred.reject(this)},_resolve:function(){this.deferred.resolve(this)},always:function(a){return this.deferred.always(a),this},done:function(a){return this.deferred.done(a),this},fail:function(a){return this.deferred.fail(a),this},progress:function(a){return this.deferred.progress(a),this}}),a.fn.voila=function(){return b.apply(b,[this].concat(Array.prototype.slice.call(arguments)))};var c=function(){return this.initialize.apply(this,Array.prototype.slice.call(arguments))};return a.extend(c.prototype,{supports:{naturalWidth:function(){return"naturalWidth"in new Image}()},initialize:function(b,c,d){return this.img=a(b)[0],this.successCallback=c,this.errorCallback=d,this.isLoaded=!1,this.options=a.extend({natural:!0,pollFallbackAfter:1e3},arguments[3]||{}),this.supports.naturalWidth&&this.options.natural?this.img.complete&&"undefined"!=a.type(this.img.naturalWidth)?void setTimeout(a.proxy(function(){this.img.naturalWidth>0?this.success():this.error()},this)):(a(this.img).bind("error",a.proxy(function(){setTimeout(a.proxy(function(){this.error()},this))},this)),this.intervals=[[1e3,10],[2e3,50],[4e3,100],[2e4,500]],this._ipos=0,this._time=0,this._delay=this.intervals[this._ipos][1],void this.poll()):void setTimeout(a.proxy(this.fallback,this))},poll:function(){this._polling=setTimeout(a.proxy(function(){if(this.img.naturalWidth>0)return void this.success();if(this._time+=this._delay,this.options.pollFallbackAfter&&this._time>=this.options.pollFallbackAfter&&!this._usedPollFallback&&(this._usedPollFallback=!0,this.fallback()),this._time>this.intervals[this._ipos][0]){if(!this.intervals[this._ipos+1])return void this.error();this._ipos++,this._delay=this.intervals[this._ipos][1]}this.poll()},this),this._delay)},fallback:function(){var b=new Image;this._fallbackImg=b,b.onload=a.proxy(function(){b.onload=function(){},this.supports.naturalWidth||(this.img.naturalWidth=b.width,this.img.naturalHeight=b.height),this.success()},this),b.onerror=a.proxy(this.error,this),b.src=this.img.src},abort:function(){this._fallbackImg&&(this._fallbackImg.onload=function(){}),this._polling&&(clearTimeout(this._polling),this._polling=null)},success:function(){this._calledSuccess||(this._calledSuccess=!0,this.isLoaded=!0,this.successCallback(this))},error:function(){this._calledError||(this._calledError=!0,this.abort(),this.errorCallback&&this.errorCallback(this))}}),b});
\ No newline at end of file
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):jQuery&&!window.Voila&&(window.Voila=a(jQuery))}(function(a){function b(c,d,e){if(!(this instanceof b))return new b(c,d,e);var f=a.type(arguments[1]),g="object"===f?arguments[1]:{},h="function"===f?arguments[1]:"function"===a.type(arguments[2])?arguments[2]:!1;return this.options=a.extend({method:"naturalWidth"},g),this.deferred=new jQuery.Deferred,h&&this.always(h),this._processed=0,this.images=[],this._add(c),this}a.extend(b.prototype,{_add:function(b){var d="string"==a.type(b)?a(b):b instanceof jQuery||b.length>0?b:[b];a.each(d,a.proxy(function(b,d){var e=a(),f=a(d);e=e.add(f.is("img")?f:f.find("img")),e.each(a.proxy(function(b,d){this.images.push(new c(d,a.proxy(function(a){this._progress(a)},this),a.proxy(function(a){this._progress(a)},this),this.options))},this))},this)),this.images.length<1&&setTimeout(a.proxy(function(){this._resolve()},this))},abort:function(){this._progress=this._notify=this._reject=this._resolve=function(){},a.each(this.images,function(a,b){b.abort()}),this.images=[]},_progress:function(a){this._processed++,a.isLoaded||(this._broken=!0),this._notify(a),this._processed==this.images.length&&this[this._broken?"_reject":"_resolve"]()},_notify:function(a){this.deferred.notify(this,a)},_reject:function(){this.deferred.reject(this)},_resolve:function(){this.deferred.resolve(this)},always:function(a){return this.deferred.always(a),this},done:function(a){return this.deferred.done(a),this},fail:function(a){return this.deferred.fail(a),this},progress:function(a){return this.deferred.progress(a),this}}),a.fn.voila=function(){return b.apply(b,[this].concat(Array.prototype.slice.call(arguments)))};var c=function(){return this.initialize.apply(this,Array.prototype.slice.call(arguments))};return a.extend(c.prototype,{supports:{naturalWidth:function(){return"naturalWidth"in new Image}()},initialize:function(b,c,d){return this.img=a(b)[0],this.successCallback=c,this.errorCallback=d,this.isLoaded=!1,this.options=a.extend({method:"naturalWidth",pollFallbackAfter:1e3},arguments[3]||{}),this.supports.naturalWidth&&"onload"!=this.options.method?this.img.complete&&"undefined"!=a.type(this.img.naturalWidth)?void setTimeout(a.proxy(function(){this.img.naturalWidth>0?this.success():this.error()},this)):(a(this.img).bind("error",a.proxy(function(){setTimeout(a.proxy(function(){this.error()},this))},this)),this.intervals=[[1e3,10],[2e3,50],[4e3,100],[2e4,500]],this._ipos=0,this._time=0,this._delay=this.intervals[this._ipos][1],void this.poll()):void setTimeout(a.proxy(this.fallback,this))},poll:function(){this._polling=setTimeout(a.proxy(function(){if(this.img.naturalWidth>0)return void this.success();if(this._time+=this._delay,this.options.pollFallbackAfter&&this._time>=this.options.pollFallbackAfter&&!this._usedPollFallback&&(this._usedPollFallback=!0,this.fallback()),this._time>this.intervals[this._ipos][0]){if(!this.intervals[this._ipos+1])return void this.error();this._ipos++,this._delay=this.intervals[this._ipos][1]}this.poll()},this),this._delay)},fallback:function(){var b=new Image;this._fallbackImg=b,b.onload=a.proxy(function(){b.onload=function(){},this.supports.naturalWidth||(this.img.naturalWidth=b.width,this.img.naturalHeight=b.height),this.success()},this),b.onerror=a.proxy(this.error,this),b.src=this.img.src},abort:function(){this._fallbackImg&&(this._fallbackImg.onload=function(){}),this._polling&&(clearTimeout(this._polling),this._polling=null)},success:function(){this._calledSuccess||(this._calledSuccess=!0,this.isLoaded=!0,this.successCallback(this))},error:function(){this._calledError||(this._calledError=!0,this.abort(),this.errorCallback&&this.errorCallback(this))}}),b});
\ No newline at end of file