diff --git a/README.md b/README.md
index f469012..d60b67a 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ Voilà is a [jQuery](http://jquery.com) plugin that provides callbacks for image
Its API is inspired by [imagesLoaded](http://imagesloaded.desandro.com). Voilà extends this by adding useful methods like `abort()` and support for `naturalWidth/Height` in all browsers, making it compatible with IE6 and IE7.
-Voilà also comes with an alternative loading method that allows callbacks to be used as soon as naturalWidth/Height are available, even while images are still rendering.
+Voilà uses a polling method that triggers callbacks as soon as `naturalWidth` is available. This makes it faster than methods that wait for `onload` to fire.
## Install
@@ -37,7 +37,7 @@ $(element).voila([options][, callback]);
```js
// For example
$('#container').voila(callback);
-$('#container').voila({ render: false }, callback);
+$('#container').voila({ natural: false }, callback);
```
+ `options` _Object_ - (optional) An object with Options
@@ -72,11 +72,10 @@ $('#container').voila()
Options can be set as the first parameter.
-+ `render` - _Boolean_ - Wait for images to fully render before using callbacks when `true` (the default), or as soon as naturalWidth/Height are available when `false`. Using `false` means images could still be rendering as callbacks are called.
++ `natural` - _Boolean_ - Callback 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.
```js
-$('#container').voila({ render: false }, function(instance) {
- console.log('naturalWidth/Height available, some images might still be rendering');
+$('#container').voila({ natural: true }, 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 a04fda4..4908f52 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "voila",
- "version": "1.0.4",
+ "version": "1.0.5",
"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 e041fed..800b4cd 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -21,7 +21,7 @@
Voilà
-
+
diff --git a/demo/js/demo.js b/demo/js/demo.js
index 49369de..aa33c09 100644
--- a/demo/js/demo.js
+++ b/demo/js/demo.js
@@ -28,7 +28,7 @@ var Demo = {
Progress.initialize({ items: this._items });
- this.renderChange();
+ this.naturalChange();
this.startObserving();
},
@@ -40,7 +40,7 @@ var Demo = {
startObserving: function() {
$('#add').on('click', $.proxy(this.add, this));
$('#reset').on('click', $.proxy(this.reset, this));
- $('#render').on('change', $.proxy(this.renderChange, this));
+ $('#natural').on('change', $.proxy(this.naturalChange, this));
},
add: function() {
@@ -95,9 +95,9 @@ var Demo = {
}
},
- renderChange: function() {
+ naturalChange: function() {
this.setOptions({
- render: $('#render').prop('checked')
+ natural: $('#natural').prop('checked')
});
}
};
diff --git a/package.json b/package.json
index 75db4a3..a1c7907 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "voila",
"title": "Voilà",
- "version": "1.0.4",
+ "version": "1.0.5",
"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 ca32859..4f50be9 100644
--- a/src/imageready.js
+++ b/src/imageready.js
@@ -17,32 +17,32 @@ $.extend(ImageReady.prototype, {
this.isLoaded = false;
this.options = $.extend({
- render: true,
+ natural: true,
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) {
+ // timeout allows callbacks to be attached
+ setTimeout($.proxy(this.fallback, this));
+ return;
+ }
+
// can exit out right away if we have a naturalWidth
if (this.img.complete && $.type(this.img.naturalWidth) != 'undefined') {
setTimeout($.proxy(function() {
if (this.img.naturalWidth > 0) {
this.isLoaded = true;
- this.successCallback(this);
+ this.success();
} else {
- this.errorCallback(this);
+ this.error();
}
}, this));
return;
}
- // fallback for browsers without support for naturalWidth/Height
- // IE7-8
- // we also use it to wait for complete image loading
- if (!this.supports.naturalWidth || this.options.render) {
- // timeout allows callbacks to be attached
- setTimeout($.proxy(this.fallback, this));
- return;
- }
-
// we instantly bind to onerror so we catch right away
// timeout allows callbacks to be attached
$(this.img).bind('error', $.proxy(function() {
@@ -65,6 +65,7 @@ $.extend(ImageReady.prototype, {
this._time = 0;
this._delay = this.intervals[this._ipos][1];
+ // start polling
this.poll();
},
@@ -122,7 +123,7 @@ $.extend(ImageReady.prototype, {
img.onerror = $.proxy(this.error, this);
- img.src = $(this.img).attr('src');
+ img.src = this.img.src;
},
abort: function() {
diff --git a/src/voila.js b/src/voila.js
index 8258dcc..70a3186 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({
- render: true
+ natural: true
}, options);
this.deferred = new jQuery.Deferred();
diff --git a/voila.pkgd.js b/voila.pkgd.js
index 7a08705..960f7a6 100644
--- a/voila.pkgd.js
+++ b/voila.pkgd.js
@@ -1,5 +1,5 @@
/*!
- * Voilà - v1.0.4
+ * Voilà - v1.0.5
* (c) 2014 Nick Stakenburg
*
* MIT License
@@ -25,7 +25,7 @@ function Voila(elements, opts, cb) {
$.type(arguments[2]) === 'function' ? arguments[2] : false;
this.options = $.extend({
- render: true
+ natural: true
}, options);
this.deferred = new jQuery.Deferred();
@@ -160,32 +160,32 @@ $.extend(ImageReady.prototype, {
this.isLoaded = false;
this.options = $.extend({
- render: true,
+ natural: true,
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) {
+ // timeout allows callbacks to be attached
+ setTimeout($.proxy(this.fallback, this));
+ return;
+ }
+
// can exit out right away if we have a naturalWidth
if (this.img.complete && $.type(this.img.naturalWidth) != 'undefined') {
setTimeout($.proxy(function() {
if (this.img.naturalWidth > 0) {
this.isLoaded = true;
- this.successCallback(this);
+ this.success();
} else {
- this.errorCallback(this);
+ this.error();
}
}, this));
return;
}
- // fallback for browsers without support for naturalWidth/Height
- // IE7-8
- // we also use it to wait for complete image loading
- if (!this.supports.naturalWidth || this.options.render) {
- // timeout allows callbacks to be attached
- setTimeout($.proxy(this.fallback, this));
- return;
- }
-
// we instantly bind to onerror so we catch right away
// timeout allows callbacks to be attached
$(this.img).bind('error', $.proxy(function() {
@@ -208,6 +208,7 @@ $.extend(ImageReady.prototype, {
this._time = 0;
this._delay = this.intervals[this._ipos][1];
+ // start polling
this.poll();
},
@@ -265,7 +266,7 @@ $.extend(ImageReady.prototype, {
img.onerror = $.proxy(this.error, this);
- img.src = $(this.img).attr('src');
+ img.src = this.img.src;
},
abort: function() {
diff --git a/voila.pkgd.min.js b/voila.pkgd.min.js
index 320ccaf..71b9851 100644
--- a/voila.pkgd.min.js
+++ b/voila.pkgd.min.js
@@ -1,7 +1,7 @@
/*!
- * Voilà - v1.0.4
+ * Voilà - v1.0.5
* (c) 2014 Nick Stakenburg
*
* 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({render:!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({render:!0,pollFallbackAfter:1e3},arguments[3]||{}),this.img.complete&&"undefined"!=a.type(this.img.naturalWidth)?void setTimeout(a.proxy(function(){this.img.naturalWidth>0?(this.isLoaded=!0,this.successCallback(this)):this.errorCallback(this)},this)):!this.supports.naturalWidth||this.options.render?void setTimeout(a.proxy(this.fallback,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())},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=a(this.img).attr("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({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.isLoaded=!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