From 63bd11d5aba35b2b2d5aa5b26261548e352a2be0 Mon Sep 17 00:00:00 2001 From: Nick Stakenburg Date: Sun, 7 Jun 2015 03:46:30 +0200 Subject: [PATCH] Changed render check to a timeout Callbacks could otherwise never fire when updating image.src during a load. This might be expected while updating a src but we shouldn't check for it ourselves and always fire the callback. --- bower.json | 2 +- package.json | 2 +- src/imageready.js | 28 ++++------------------------ voila.pkgd.js | 30 +++++------------------------- voila.pkgd.min.js | 4 ++-- 5 files changed, 13 insertions(+), 53 deletions(-) diff --git a/bower.json b/bower.json index 1f3e4fb..9520f20 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "voila", - "version": "1.3.0", + "version": "1.3.1", "description": "A jQuery plugin that provides callbacks for images, letting you know when they've loaded.", "keywords": [ "image", diff --git a/package.json b/package.json index 1395944..bdae2d7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "voila", "title": "Voilà", - "version": "1.3.0", + "version": "1.3.1", "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 05a619b..8fe4000 100644 --- a/src/imageready.js +++ b/src/imageready.js @@ -245,33 +245,13 @@ $.extend(ImageReady.prototype, { // used by success() only waitForRender: function(callback) { - if (this._renderPoll) this._renderPoll.abort(); - - this._renderPoll = new Poll({ - test: $.proxy(function() { - // when using onload, the detached image node shoud have - // the same dimensions as the in the DOM to guarantee - // a complete render. - // IE 11 can have situations where the detached image is loaded - // but rendering hasn't completed on the with the same src, - // this guards against that. - if (this.options.method == 'onload') { - return this.img.naturalWidth == this._onloadImage.naturalWidth - && this.img.naturalHeight == this._onloadImage.naturalHeight; - } else { - // otherwise we used naturalWidth an might not have a detached - // image that rendered successfully. - return true; - } - }, this), - success: callback - }); + this._renderTimeout = setTimeout(callback); }, stopWaitingForRender: function() { - if (this._renderPoll) { - this._renderPoll.abort(); - this._renderPoll = null; + if (this._renderTimeout) { + clearTimeout(this._renderTimeout); + this._renderTimeout = null; } if (this._errorRenderTimeout) { diff --git a/voila.pkgd.js b/voila.pkgd.js index 606eb97..132a85f 100644 --- a/voila.pkgd.js +++ b/voila.pkgd.js @@ -1,5 +1,5 @@ /*! - * Voilà - v1.3.0 + * Voilà - v1.3.1 * (c) 2015 Nick Stakenburg * * http://voila.nickstakenburg.com @@ -390,33 +390,13 @@ $.extend(ImageReady.prototype, { // used by success() only waitForRender: function(callback) { - if (this._renderPoll) this._renderPoll.abort(); - - this._renderPoll = new Poll({ - test: $.proxy(function() { - // when using onload, the detached image node shoud have - // the same dimensions as the in the DOM to guarantee - // a complete render. - // IE 11 can have situations where the detached image is loaded - // but rendering hasn't completed on the with the same src, - // this guards against that. - if (this.options.method == 'onload') { - return this.img.naturalWidth == this._onloadImage.naturalWidth - && this.img.naturalHeight == this._onloadImage.naturalHeight; - } else { - // otherwise we used naturalWidth an might not have a detached - // image that rendered successfully. - return true; - } - }, this), - success: callback - }); + this._renderTimeout = setTimeout(callback); }, stopWaitingForRender: function() { - if (this._renderPoll) { - this._renderPoll.abort(); - this._renderPoll = null; + if (this._renderTimeout) { + clearTimeout(this._renderTimeout); + this._renderTimeout = null; } if (this._errorRenderTimeout) { diff --git a/voila.pkgd.min.js b/voila.pkgd.min.js index ac2a387..614005c 100644 --- a/voila.pkgd.min.js +++ b/voila.pkgd.min.js @@ -1,9 +1,9 @@ /*! - * Voilà - v1.3.0 + * Voilà - v1.3.1 * (c) 2015 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({method:"onload"},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(a){var b=function(){return this.initialize.apply(this,Array.prototype.slice.call(arguments))};a.extend(b.prototype,{initialize:function(){this.options=a.extend({test:function(){},success:function(){},timeout:function(){},callAt:!1,intervals:[[0,0],[1e3,10],[2e3,50],[4e3,100],[2e4,500]]},arguments[0]||{}),this._test=this.options.test,this._success=this.options.success,this._timeout=this.options.timeout,this._ipos=0,this._time=0,this._delay=this.options.intervals[this._ipos][1],this._callTimeouts=[],this.poll(),this._createCallsAt()},poll:function(){this._polling=setTimeout(a.proxy(function(){if(this._test())return void this.success();if(this._time+=this._delay,this._time>=this.options.intervals[this._ipos][0]){if(!this.options.intervals[this._ipos+1])return void("function"==a.type(this._timeout)&&this._timeout());this._ipos++,this._delay=this.options.intervals[this._ipos][1]}this.poll()},this),this._delay)},success:function(){this.abort(),this._success()},_createCallsAt:function(){this.options.callAt&&a.each(this.options.callAt,a.proxy(function(b,c){var d=c[0],e=c[1],f=setTimeout(a.proxy(function(){e()},this),d);this._callTimeouts.push(f)},this))},_stopCallTimeouts:function(){a.each(this._callTimeouts,function(a,b){clearTimeout(b)}),this._callTimeouts=[]},abort:function(){this._stopCallTimeouts(),this._polling&&(clearTimeout(this._polling),this._polling=null)}});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:"onload",pollFallbackAfter:1e3},arguments[3]||{}),"onload"!=this.options.method&&this.supports.naturalWidth?void this.poll():void this.load()},poll:function(){this._poll=new b({test:a.proxy(function(){return this.img.naturalWidth>0},this),success:a.proxy(function(){this.success()},this),timeout:a.proxy(function(){this.error()},this),callAt:[[this.options.pollFallbackAfter,a.proxy(function(){this.load()},this)]]})},load:function(){this._loading=setTimeout(a.proxy(function(){var b=new Image;this._onloadImage=b,b.onload=a.proxy(function(){b.onload=function(){},this.supports.naturalWidth||(this.img.naturalWidth=b.width,this.img.naturalHeight=b.height,b.naturalWidth=b.width,b.naturalHeight=b.height),this.success()},this),b.onerror=a.proxy(this.error,this),b.src=this.img.src},this))},success:function(){this._calledSuccess||(this._calledSuccess=!0,this.abort(),this.waitForRender(a.proxy(function(){this.isLoaded=!0,this.successCallback(this)},this)))},error:function(){this._calledError||(this._calledError=!0,this.abort(),this._errorRenderTimeout=setTimeout(a.proxy(function(){this.errorCallback&&this.errorCallback(this)},this)))},abort:function(){this.stopLoading(),this.stopPolling(),this.stopWaitingForRender()},stopPolling:function(){this._poll&&(this._poll.abort(),this._poll=null)},stopLoading:function(){this._loading&&(clearTimeout(this._loading),this._loading=null),this._onloadImage&&(this._onloadImage.onload=function(){},this._onloadImage.onerror=function(){})},waitForRender:function(c){this._renderPoll&&this._renderPoll.abort(),this._renderPoll=new b({test:a.proxy(function(){return"onload"==this.options.method?this.img.naturalWidth==this._onloadImage.naturalWidth&&this.img.naturalHeight==this._onloadImage.naturalHeight:!0},this),success:c})},stopWaitingForRender:function(){this._renderPoll&&(this._renderPoll.abort(),this._renderPoll=null),this._errorRenderTimeout&&(clearTimeout(this._errorRenderTimeout),this._errorRenderTimeout=null)}}),c}(jQuery);return 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:"onload"},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(a){var b=function(){return this.initialize.apply(this,Array.prototype.slice.call(arguments))};a.extend(b.prototype,{initialize:function(){this.options=a.extend({test:function(){},success:function(){},timeout:function(){},callAt:!1,intervals:[[0,0],[1e3,10],[2e3,50],[4e3,100],[2e4,500]]},arguments[0]||{}),this._test=this.options.test,this._success=this.options.success,this._timeout=this.options.timeout,this._ipos=0,this._time=0,this._delay=this.options.intervals[this._ipos][1],this._callTimeouts=[],this.poll(),this._createCallsAt()},poll:function(){this._polling=setTimeout(a.proxy(function(){if(this._test())return void this.success();if(this._time+=this._delay,this._time>=this.options.intervals[this._ipos][0]){if(!this.options.intervals[this._ipos+1])return void("function"==a.type(this._timeout)&&this._timeout());this._ipos++,this._delay=this.options.intervals[this._ipos][1]}this.poll()},this),this._delay)},success:function(){this.abort(),this._success()},_createCallsAt:function(){this.options.callAt&&a.each(this.options.callAt,a.proxy(function(b,c){var d=c[0],e=c[1],f=setTimeout(a.proxy(function(){e()},this),d);this._callTimeouts.push(f)},this))},_stopCallTimeouts:function(){a.each(this._callTimeouts,function(a,b){clearTimeout(b)}),this._callTimeouts=[]},abort:function(){this._stopCallTimeouts(),this._polling&&(clearTimeout(this._polling),this._polling=null)}});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:"onload",pollFallbackAfter:1e3},arguments[3]||{}),"onload"!=this.options.method&&this.supports.naturalWidth?void this.poll():void this.load()},poll:function(){this._poll=new b({test:a.proxy(function(){return this.img.naturalWidth>0},this),success:a.proxy(function(){this.success()},this),timeout:a.proxy(function(){this.error()},this),callAt:[[this.options.pollFallbackAfter,a.proxy(function(){this.load()},this)]]})},load:function(){this._loading=setTimeout(a.proxy(function(){var b=new Image;this._onloadImage=b,b.onload=a.proxy(function(){b.onload=function(){},this.supports.naturalWidth||(this.img.naturalWidth=b.width,this.img.naturalHeight=b.height,b.naturalWidth=b.width,b.naturalHeight=b.height),this.success()},this),b.onerror=a.proxy(this.error,this),b.src=this.img.src},this))},success:function(){this._calledSuccess||(this._calledSuccess=!0,this.abort(),this.waitForRender(a.proxy(function(){this.isLoaded=!0,this.successCallback(this)},this)))},error:function(){this._calledError||(this._calledError=!0,this.abort(),this._errorRenderTimeout=setTimeout(a.proxy(function(){this.errorCallback&&this.errorCallback(this)},this)))},abort:function(){this.stopLoading(),this.stopPolling(),this.stopWaitingForRender()},stopPolling:function(){this._poll&&(this._poll.abort(),this._poll=null)},stopLoading:function(){this._loading&&(clearTimeout(this._loading),this._loading=null),this._onloadImage&&(this._onloadImage.onload=function(){},this._onloadImage.onerror=function(){})},waitForRender:function(a){this._renderTimeout=setTimeout(a)},stopWaitingForRender:function(){this._renderTimeout&&(clearTimeout(this._renderTimeout),this._renderTimeout=null),this._errorRenderTimeout&&(clearTimeout(this._errorRenderTimeout),this._errorRenderTimeout=null)}}),c}(jQuery);return b}); \ No newline at end of file